0

我有一个基本错误Error: Invariant failed: You should not use <NavLink> outside a <Router>，但在我的情况下，我进入了一个类似于显示到错误路径中的路由器： 在此处输入图像描述

当我在本地使用它时它工作正常但是当我尝试在服务器上运行它时（使用 env dev 或 prod）我得到了这个错误。

这是我的代码的简化部分，我尝试保留大多数元素来显示（从路由器）到（NavLink）的路径。

  • 有些类连接到redux store（不知道它是否改变了什么？）
  • NavLink 是由外部项目生成的（使用 npm 依赖项导入）external-react-kit（不知道它是否改变了一些更近的​​东西？）

指数

import React, { Component } from 'rect'
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import { Provider } from 'react-redux'

import Layout from './layout'
import Error404Page from './errors/e404'
import HomePage from './pages/home'
import EmailerEmailsPage from './pages/emailer-email'
/* ... All intern project components, pages, etc.. */

import { Button, Page } from 'external-react-kit'


class EmailerTemplatesListPage extends Component {
  render() {
    const pageExtra = (
      <Button primary type="link" href="/emailer/templates/create">
         Create new
      </Button>
    );    
    return (
      <Page extra={pageExtra} title="Emailer" subtitle="Templates">
        /* .... */
      </Page>
    );
  }
};


class EmailerTemplatesPage extends Component {
  render() {
    return (
      <Switch>
        <Route key="create" path="/emailer/templates/create" component={EmailerTemplatesFormPage} />
        <Route key="update" path="/emailer/templates/update/:id" component={EmailerTemplatesFormPage} />
        <Route key="send" path="/emailer/templates/send/:id" component={EmailerTemplatesSendPage} />
        <Route key="list" path="/emailer/templates/:page?" component={EmailerTemplatesListPage} />
      </Switch>
    );
  }
}



class EmailerPage extends Component {
  render() {
    return ([
      (err ? <span key="err" className="error">{this.props.err}</span> : false),
      <Route key="templates" path="/emailer/templates" component={EmailerTemplatesPage} />,
      <Route key="emails" path="/emailer/emails" component={EmailerEmailsPage} />,
    ])
  }
}


class Pages extends Component {
  render() {
    return (
       <Switch>
          <Route path="/" exact component={HomePage} />
          <Route path="/emailer" component={EmailerPage} />
          <Route component={Error404Page} />
        </Switch>
    );
  }
}

class App extends Component {
  render() {
    return (
      <Layout key="document-layout">
        <Pages {...this.props} />
      </Layout>
    );
  }
}

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>,
  document.getElementById('root')
);

外部反应套件 / Button.js

import { NavLink } from 'react-router-dom';

class Button extends Components {
  render() {
    const ButtonTag = (this.props.type === "link" || this.props.href) ? NavLink : 'button';
    return (
      <div
        <ButtonTag
          to={this.props.href}
        >
          {this.props.children}
        </ButtonTag>
      </div>
    );
  }
}
4

0 回答 0