React 路由器在客户端不工作。我如何解决它？答案

【问题标题】：React router is not working client-side. How do i fix it?React 路由器在客户端不工作。我如何解决它？
【发布时间】：2018-10-13 08:13:26
【问题描述】：

我正在使用 React 浏览器路由器，作为带有 create-react-app 的 npm 模块 (react-router-dom)。路由在本地工作正常，但在部署后不行。 按下链接时，我没有被带到所需的位置（例如 /start）。找不到该页面。

我查看了this 提示，但它仍然不起作用。

我没有使用 Heroku，我不知道我是否应该使用。

以下是我的 react App.js 中的一些代码 sn-ps：

import { BrowserRouter, Route, Switch } from "react-router-dom";

import Home from "./Components/Home.jsx";
import Billigast from "./Components/Billigast";
import NoMatch from "./Components/NoMatch";
import Start from "./Components/Start";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <NavBar />
          <Switch>
            <Route path="/" component={Home} exact />
            <Route path="/start" component={Start} />
            <Route component={NoMatch} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

静态.json：

{
  "root": "/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

我已经尝试了几个"root": 位置。我的 index.html 文件位于根目录中。

这是其中一个链接页面：

import React from "react";
import NavBar from "./NavBar";
import Form from "./Form";

const Start = () => {
  return (
    <div>
      <Form />
    </div>
  );
};

export default Start;

感谢您的帮助！

【问题讨论】：

究竟是什么“不起作用”？请具体。
抱歉，正文已更新。
React Router 使用 history.push() 在内部更改位置并显示/隐藏组件。获取“找不到页面”听起来像是浏览器实际上遵循了链接。您检查浏览器控制台是否有错误？
谢谢，我想通了。这是一个愚蠢的错误。

标签： javascript html react-router jsx react-router-dom

【解决方案1】：

我没有正确导入 react-router-dom NavLink。我正在导入 NavLink，但来自 reactstrap。

修复（在 NavBar 组件中）：

import { NavLink as RouterNavLink } from "react-router-dom";

因为 reactstrap 和 react-router-dom 都使用相同的名称（NavLink），并且由于设计原因我想同时使用它们。

然后我将 RouterNavLink 包装在 NavLink 中，如下所示：

<NavLink>
  <RouterNavLink to="/start">Start</RouterNavLink>
</NavLink>

这并不奇怪，因为我什至没有正确导入。

另外，我不需要 static.json 文件。

【讨论】：