reactjs - 如何将 BrowserRouter 从 react-router-dom 更改为 Router 以使用自定义历史对象？

Question

我正在尝试使用自定义历史对象来在我的 redux 操作中使用 history.push()。这是我的代码：

应用程序.js

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

import myHistory from './utils/history';

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

export default App;

历史.js：

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

路由.js

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

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

export default Routes;

MainNavigation.js

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

const MainNavigation = () => {
   return (
      <>
         <div 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>
         </div>
      </>
   );
};

export default MainNavigation;

当我尝试使用history.push() 或在不同组件之间 导航时，url 会发生变化，但组件不会呈现，我必须刷新页面才能使其显示。我在这个问题上几天了，我不知道还能做什么。任何建议将不胜感激。

谢谢你。

标签： reactjsreduxreact-router-dom