未捕获的错误：不变式失败：您不应在 <Router> 之外使用 <NavLink>

Question

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

index.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'));

App.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;

Home.txs

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>

   );
 };

Answer 1

我认为，如果您将 NavLink 移到 Switch 之外，将会解决您的问题。