时间戳

首页 > 解决方案 > 反应路由器不通过 h​​istory.push() 渲染组件

reactjs - 反应路由器不通过 h​​istory.push() 渲染组件

问题描述

import { React } from "react";
import { Router as MyRouter, Switch, Route } from "react-router-dom";
import NavBar from "./Components/NavBar";
import Article from "./Components/Article";
import Articles from "./Components/Articles";

var createBrowserHistory = require("history").createBrowserHistory;
const history = createBrowserHistory();

const Router = () => {
  return (
    <div>
      <MyRouter history={history}>
        <NavBar />
        <Switch>
          <Route exact path="/" component={Articles} />
          <Route exact path="/home/:title/:id" component={Article} />
        </Switch>
      </MyRouter>
    </div>
  );
};

我有一个显示文章列表的组件，如果您单击其中一篇文章，您将被重定向到该文章的详细信息。此外，文章仅使用 id 参数从服务器获取内容。我通过使用实现了

const history = useHistory();
const onclick = (title, id) =>{
    history.push(`/home/${title}/${id}`);
}

最初，我对这种结构没有任何问题。但是，当我添加了一篇随机测试文章并单击它时，url 发生了变化，但组件从未呈现（我试图在文章组件中记录“hello world”但它从未被打印出来）。奇怪的是，如果我手动输入localhost:3000/home/fijdaifjaid/100带有一些随机标题和正确 id 的 url（路由器无法为其渲染组件的 id），组件的渲染没有问题，但是如果我手动输入正确的标题，它不会工作。（我的标题是“＃1优先”）

关于这里的问题有什么建议吗？另外我应该注意这不是一个普遍的问题，我还有其他几个运行良好的测试 ID。

我的依赖：

 "react": "^17.0.2",
 "react-router-dom": "^5.2.0",

标签： reactjsreact-routerreact-router-dom

解决方案

代替路由器使用浏览器路由器：

import { React } from "react";
import { BrowserRouter as MyRouter, Switch, Route } from "react-router-dom";
import NavBar from "./Components/NavBar";
import Article from "./Components/Article";
import Articles from "./Components/Articles";

// var createBrowserHistory = require("history").createBrowserHistory;
// const history = createBrowserHistory();

const Router = () => {
  return (
    <div>
      <MyRouter basename={process.env.PUBLIC_URL}>
        <NavBar />
        <Switch>
          <Route exact path="/" component={Articles} />
          <Route exact path="/home/:title/:id" component={Article} />
        </Switch>
      </MyRouter>
    </div>
  );
};

在构建之前不要忘记在你的 package.json 中添加主页：

"homepage": "https://xxxxx.github.io",

推荐阅读