React Router v4 路由不起作用答案

【问题标题】：React Router v4 routes not workingReact Router v4 路由不起作用
【发布时间】：2017-09-13 09:02:33
【问题描述】：

我对 React 比较陌生，我正在尝试弄清楚如何让 React 路由器工作。我有一个超级简单的测试应用程序，看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
    <Route path ="/" component = {Home} />
    <Route path ="/about" component = {About} />
    </Switch>
  </Router>
)

ReactDOM.render(<Test />, document.getElementById('app'));

当我运行应用程序时，主页组件会毫无问题地加载，当我单击“单击我”链接时，url 会更改为 localhost/about，但是什么也没有发生。如果我单击刷新，我会收到“无法获取 /about”。显然我做错了什么，但我无法弄清楚是什么。我也在使用 Webpack。

【问题讨论】：

控制台有消息吗？这可能是About 组件而不是路由器本身的问题。另外，尝试将About 组件放在/ 路径上，看看会发生什么。
RE：无法获取 /about：考虑使用 create-react-app。它是 facebook 的祝福，它使服务器成为开发中开箱即用的工作的一部分，以及许多其他开发细节。如果没有它，您需要自己管理将所有内容路由到 index.html，或者在 react-router 中使用哈希路由器。

标签： reactjs react-router react-router-v4

【解决方案1】：

您需要为/ 使用准确的路径，否则它也会匹配/about。

<Route exact path="/" component={Home} />

正如 cmets 中提到的，对于这么简单的事情，我建议使用Create React App，这将确保您的服务器代码和您的 webpack 设置都是正确的。使用create-react-app 后，您只需使用npm 安装react router v4 包，然后将上面的代码放入App.js 文件中即可。对您的代码进行了一些小的更改，以使其与create-react-app 一起使用，如下所示：

// App.js
import React from 'react';

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h1><Link to="/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
)

export default App;

quick start instructions from React Router V4 documentation 会告诉你和我刚才解释的差不多。

【讨论】：

对不起，我遇到了类似的问题，虽然我已经添加了确切的内容，但它仍然无法正常工作
@akshaykishore 您应该打开一个新问题并向我们提供您正在使用的代码来重现您的问题。
代码类似，只是我从另一个文件中导入组件。顺便刷新一下第二个页面组件就被渲染了。

【解决方案2】：

如果你从 localhost 运行，你需要将 historyApiFallback: true 添加到你的 webpack.config 文件中

【讨论】：

这是我的问题！！谢谢。
更多关于这方面的信息会很有帮助！
如果使用 create-react-app，你如何实现这个？如果您的堆栈部署到公共服务器，这会是一个问题吗？我在本地和我的服务器上都遇到了同样的问题
这需要添加到文档中，我永远不会知道这一点。一直在拉我的头发。
我没有 webpack.config 文件。我该怎么办？

【解决方案3】：

如果添加 exact 不解决问题，我已将其替换为

  <Route exact path="/" component={App} />
  <Route path="/login" component={Login} />
  <Route path="/register" component={Register} />

这个

  <Route exact path="/"> <App /> </Route>
  <Route path="/login"> <Login /> </Route>
  <Route path="/register"> <Register /> </Route>

将组件作为 Route Child 解决了我的页面路由问题，我希望它也可以帮助其他人

【讨论】：

【解决方案4】：

您也可以通过始终将默认路由保留在末尾来解决此问题

<Route path ="/about" component = {About} />

<Route path="/" component={Home} /> // 总是在最后

不用放exact关键字

【讨论】：

【解决方案5】：

在使用 Switch 时，我们需要记住，我们将路由指定为从 最具体 到最通用。在您的情况下，您在"/about" 之前指定了"/"。所以每次反应都在寻找"/about"，但向下<Route "/"也满足"/about"（因为"/about"是"/"的子路由）所以在 "/"

之前使用："/about"

这样你也可以省略exact

import React from 'react';
import ReactDOM from 'react-dom';

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
        <Route path ="/about" component = {About} />
        <Route path ="/" component = {Home} />
    </Switch>
  </Router>
)

ReactDOM.render(<Test />, document.getElementById('app'));

【讨论】：

【解决方案6】：

也许它可以帮助某人。我忘了使用正确的历史记录，而不是使用Router 我使用的是BrowserRouter，它忽略了history={...} 使用它自己的属性。我试图用我手动创建的历史记录重定向页面，但 BrowserRouter 使用的是它自己的历史记录。

【讨论】：

【解决方案7】：

这是发生这种情况的另一种方式。这是一个愚蠢的错误，但这是我的问题。

我的问题是导入错误。最初，我有以下导入：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

我决定将 BrowserRouter 组件移到更高的级别，但是在删除不再用户的路由器组件时，我的导入变成了这样：

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

因此，实际上，我最终删除了 Switch 组件并将 BrowserRouter 别名为 Switch。

Switch 不再按预期工作是正常的。

【讨论】：