39

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

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。

4

7 回答 7

82

您需要使用确切的路径，/否则它也会匹配/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 文档中的快速入门说明将告诉您与我刚刚解释的几乎相同的内容。

于 2017-04-17T18:40:43.970 回答
36

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

于 2017-05-20T10:12:27.463 回答
10

如果添加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 解决了我的页面路由我希望它也可以帮助其他人

于 2019-11-12T17:51:34.440 回答
6

在使用Switch时，我们需要记住我们指定的路由是从最具体到最通用的。在您的情况下，您已经指定"/"before "/about"。所以每次 react 都在寻找"/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'));
于 2020-08-21T18:36:10.027 回答
5

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

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

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

无需输入exact关键字

于 2020-08-01T15:13:17.633 回答
2

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

于 2019-02-08T08:27:58.053 回答
1

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

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

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

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

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

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

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

于 2020-11-11T15:07:41.770 回答