React-router v6：无法读取未定义的属性（读取“路径名”）

Question

我正在使用react-router v6，并且尝试使用自定义历史记录来能够在redux操作中导航（在组件外部）。所以我使用的Router from 'react-router是而不是BrowserRouter from 'react-router-dom文档中提到的。

这是我的代码：

索引.js

import myHistory from './utils/history';

import { Router } from 'react-router';

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

应用程序.js

import React from 'react';

import MainNavigation from './components/navigations/MainNavigation';
import Routes from './routes/Routes';

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

export default App;

MainNavigation.js

import React from 'react';
import { Link } from 'react-router-dom';

const MainNavigation = () => {
   return (
      <>
         <nav className='navigation'>
            <ul>
               <li>
                  <Link to='/'>Home</Link>
               </li>
               <li>
                  <Link to='/contact'>Contact</Link>
               </li>

               <li>
                  <Link to='/about'>A propos</Link>
               </li>

               <li>
                  <Link to='/user-profile'>Votre compte</Link>
               </li>
            </ul>
         </nav>
      </>
   );
};

export default MainNavigation;

路由.js

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

const Routes = () => {
   return (
      <Routing>
         <Route path='/' element={<Home />} />
         <Route path='/about' element={<About />} />
         <Route path='/contact' element={<ContactForm />} />
         <Route path='/user-profile' element={<UserAccount />} />
      </Routing>
   );
};

export default Routes;

我真的不明白为什么收到错误消息Cannot readproperties of undefined (reading 'pathname')。当我切换到 BrowserRouter 而不是 Router 时它可以工作，但我无法在我的应用程序中使用历史记录（现在在 v6 中为“导航”）。

谢谢。

Answer 1

您的路由器也需要一个位置（例如<Router location={myHistory.location} history={myHistory}>）。