Question

我正在使用React Browser Router，作为带有create-react-app的npm模块（react-router-dom）。路由在本地运行良好，但在部署后无法正常运行。 按链接时，我不会到达所需的位置（例如/ start）。找不到该页面。

我查看了this提示，但仍然无法使用。

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

以下是我的React App.js中的一些代码段：

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

static.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;

谢谢您的帮助！

Answer 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文件。

React路由器无法在客户端工作。我如何解决它？

1 个答案: