createBrowserHistory 不工作。重定向正在更新 URL，但不呈现组件

Question

我正在使用具有自定义历史记录的 React Router v5 object，并且重定向无法正常工作。我正在使用 react-router-dom 5.x ("^5.2.0") 和历史记录 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;

这是我重定向到另一个 link

的 header

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 和历史记录的另一个版本，但其中 none 似乎可以正常工作。我什至尝试使用 forceRefresh: true 但它也不起作用 :/

Answer 1

我不知道 AppHeader 相对于 AppRouter 和 vice-versa 的渲染位置，但是当您只需要一个路由上下文时，您正在使用两个路由器你的整个应用程序。

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

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

示例：

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")
);

AppRouter

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>
  );
};

createBrowserHistory 不工作。重定向正在更新 URL，但不呈现组件

createBrowserHistory is not working. The redirects are updating the URL, but not rendering the component

redirect

browser-history

reactjs

react-router

react-router-dom