createBrowserHistory 不起作用。重定向正在更新 URL，但不呈现组件答案

【问题标题】：createBrowserHistory is not working. The redirects are updating the URL, but not rendering the componentcreateBrowserHistory 不起作用。重定向正在更新 URL，但不呈现组件
【发布时间】：2022-01-27 15:49:23
【问题描述】：

我正在使用带有自定义历史记录对象的 React Router v5，并且重定向无法正常工作。我正在使用 react-router-dom 5.x ("^5.2.0") 和 history 4.x ("4.10.1")。我的重定向正在更新 URL，但不会在不重新加载页面的情况下呈现组件。

AppRouter.tsx

import React from "react";
import {Route, Router, Switch} from "react-router-dom";
import {createBrowserHistory} from "history";
import {paths} from "../configs/routerConfigs";
import Main from "../modules/Main";
import Blog from "../modules/Blog"
import Store from "../modules/Store"
import Gallery from "../modules/Gallery";

const history = createBrowserHistory();


const AppRouter = () => {
  return (
    <Router history={history}>
      <Switch>
        <Route
          path={paths.blog()}
          exact
        >
          <Blog/>
        </Route>
        <Route
          path={paths.store()}
          exact
        >
          <Store/>
        </Route>
        <Route
          path={paths.gallery()}
          exact
        >
          <Gallery/>
        </Route>
        <Route path={paths.main()} exact>
          <Main />
        </Route>
      </Switch>
    </Router>
  );
};

export default AppRouter;

这是我重定向到另一个链接的标题

index.tsx

const AppHeader: React.FC = () => {
  return (
    <BrowserRouter>
      <Header className="app-header">
        <Row gutter={16}>
          <Col span={6}>
            <div className="logo">
              <img src={Logo} alt={"cosmonet logo"}/>
              <span>Cosmonet</span>
            </div>
          </Col>
          <Col span={12}>
            <nav className={"nav"}>
              <Menu className="nav-list" mode="horizontal" >
                <Menu.Item key="1" className="nav-list-items"><Link to={paths.main()}>{"Main"}</Link></Menu.Item>
                <Menu.Item key="2" className="nav-list-items"><Link to={paths.blog()}>{"Blog"}</Link></Menu.Item>
                <Menu.Item key="3" className="nav-list-items"><Link to={paths.store()}>{"Store"}</Link></Menu.Item>
                <Menu.Item key="4" className="nav-list-items"><Link to={paths.gallery()}>{"Gallery"}</Link></Menu.Item>
              </Menu>
            </nav>
          </Col>
          <Col span={6}>
            <Button text={"log out"}/>
          </Col>
        </Row>
      </Header>
    </BrowserRouter>
  );
};

export default AppHeader;

我尝试了其他版本的 react-router-dom 和 history，但它们似乎都不能正常工作。我什至尝试使用 forceRefresh: true 但它也不起作用：/

【问题讨论】：

标签： reactjs redirect react-router react-router-dom browser-history

【解决方案1】：

我不知道AppHeader 相对于AppRouter 在哪里呈现，反之亦然，但是当您的整个应用程序只需要一个路由上下文时，您会使用两个路由器。

问题是AppHeader 中链接的任何导航操作都将由您在那里使用的BrowserRouter 处理。包裹路由的Router 不会意识到任何更改，直到您刷新页面并重新安装并读取 URL 路径。

我建议从AppRouter 中删除Router 和history 和从AppHeader 中删除BrowserRouter。在 ReactTree 中将 Router 和自定义 history 对象移到更高的位置，以便为整个应用程序提供路由上下文。

例子：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from "react-router-dom";
import { createBrowserHistory } from "history";
import App from "./App";

const history = createBrowserHistory();

ReactDOM.render(
  <StrictMode>
    <Router history={history}>
      <App />
    </Router>
  </StrictMode>,
  document.getElementById("root")
);

应用路由器

const AppRouter = () => {
  return (
    <Switch>
      <Route path={paths.blog()} exact>
        <Blog/>
      </Route>
      <Route path={paths.store()} exact>
        <Store/>
      </Route>
      <Route path={paths.gallery()} exact>
        <Gallery/>
      </Route>
      <Route path={paths.main()} exact>
        <Main />
      </Route>
    </Switch>
  );
};

AppHeader

const AppHeader: React.FC = () => {
  return (
    <Header className="app-header">
      ...
    </Header>
  );
};

【讨论】：