React Router v4 路由不起作用

Question

我对反应比较陌生，我正在尝试弄清楚如何让反应路由器工作。我有一个超级简单的测试应用程序，如下所示：

 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。

原文由 WebbH 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

正如评论中提到的，对于这么简单的事情，我建议使用 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;

React Router V4 文档中的快速入门说明 将告诉您与我刚刚解释的几乎相同的内容。

原文由 Todd Chaffee 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您从本地主机运行，则需要将 historyApiFallback: true 添加到您的 webpack.config 文件

原文由 VineFreeman 发布，翻译遵循 CC BY-SA 3.0 许可协议