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

【问题标题】：React-router v6: Cannot read properties of undefined (reading 'pathname')React-router v6：无法读取未定义的属性（读取“路径名”）
【发布时间】：2021-11-08 11:00:30
【问题描述】：

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

这是我的代码：

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

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

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

我真的不明白为什么会收到错误消息无法读取未定义的属性（读取“路径名”）。当我切换到 BrowserRouter 而不是 Router 时，它正在工作，但是我无法在我的应用中使用历史记录（'navigate' now in v6）。

谢谢。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
你好@Emanuel，谢谢你的回答。当我向路由器添加位置时，出现此错误Cannot read properties of undefined (reading 'createHref')

【解决方案2】：

You need to use unstable_HistoryRouter now

import { createBrowserHistory } from 'history';
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

let history = createBrowserHistory();

function App() {
  return (
    <HistoryRouter history={history}>
      // The rest of your app
    </HistoryRouter>
  );
}

history.push("/foo");

【讨论】：