reactjs - 未捕获的错误：不变量失败：您不应该使用外面

Question

它说我正在使用NavLinkoutside Router，但是当您查看代码时。我只是导入组件（Home），它实际上是在路线内。但是它会引发错误。

索引.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


ReactDOM.render(<App />, document.getElementById('root'));

应用程序.tsx

import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { Register } from './pages/register/register'
import { Login } from './pages/login/login'
import { Home } from './pages/home/home'

const App: React.FC = () => {
  return (
    <div id="app-root">
      <BrowserRouter>
        <Switch>
          <Route path="/register" exact component={Register} />     
          <Route path="/login" exact component={Login} />
          <Route path="/" exact component={Home} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

主页.txt

import React from 'react';
import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom";
import classNames from 'classnames'
import styles from './home.module.css';
import logoFull from 'assets/img/pangolin-logo-full.png';
import logoText from 'assets/img/pangolin-title-text-dark.png';
import homeMessages from './home.messages';

export const Home = () => {
   return (
      <div className={styles.homePage}>
          <NavLink to="/register" className={classNames(styles.registrationButton, styles.link)}>
               {homeMessages.register()} 
          </NavLink>
          <NavLink to="/login" className={classNames(styles.loginButton, styles.link)}>
               {homeMessages.login()}
          </NavLink>
      </div>

   );
 };

标签： reactjsreact-router-domstorybook

Answer 1

我想如果你搬出去NavLink会Switch解决你的问题。