React 中 <Router> 外部的 <Link> 错误消息

Question

我正在尝试在我的路由中设置一个自定义历史对象，以便能够在我的 redux 操作中使用它。我已经看到我们应该使用 'react-router' 中的<Router> 并在其中设置历史对象。这就是我所做的。

App.js

//** Import router */
import { Switch } from 'react-router-dom';
import { Router } from 'react-router';

import history from './hooks/useHistory';

const App = () => {
   return (
      <Router history={history}>
         <MainNavigation />
         <Switch>
            <Routes />
         </Switch>
      </Router>
   );
};

export default App;

MainNavigation.js

const MainNavigation = () => {
   return (
      <>
         <div className='navigation'>
            <ul>
               <Link to='/'>
                  <li>Home</li>
               </Link>
               <Link to='/contact'>
                  <li>Contact</li>
               </Link>
               <Link to='/about'>
                  <li>A propos</li>
               </Link>
               <Link to='/user-profile'>
                  <li>Votre compte</li>
               </Link>
            </ul>
         </div>
      </>
   );
};

export default MainNavigation;

最后，Routes.js

//** Import routers */
import { Redirect, Route } from 'react-router-dom';

const Routes = () => {
   return (
      <>
         <Route path='/' exact component={MainLayout} />
         <Route path='/about' exact component={About} />
         <Route path='/contact' exact component={ContactForm} />
         <Route path='/user-profile' exact component={UserAccount} />
         <Redirect to='/' />
      </>
   );
};

export default Routes;

我不明白为什么它说你不应该在<Router>之外使用<Link>，因为包含<link>（MainNavigation.js）的组件在<Router>内部标签。

Answer 1

根据此处的好答案，您似乎需要使用 BrowserRouter 或其他其中之一：You should not use <Link> outside a <Router>

还有一件事：尝试将li 元素放在<Link> 标记之外，这样你就有ul > li > Link