React Router v4 路由不起作用

Question

我对 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'));

当我运行应用程序时，主页组件加载没有任何问题，当我单击 "Click Me" link 时，url 更改为 localhost/about ，但是没有任何反应。如果我单击刷新，我会得到 "Cannot GET /about." 显然我做错了什么，但我无法弄清楚是什么。我也在用Webpack。

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;

quick start instructions from React Router V4 documentation 会告诉您与我刚才解释的几乎相同。

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

无需输入exact关键字

Answer 6

在使用 Switch 时，我们需要记住，我们将 routes 指定为来自 most specific 到 最通用 。在您的例子中，您在 "/about" 之前指定了 "/"。所以每次反应都在寻找 "/about" 但向下 <Route "/" 也满足 "/about" （因为 "/about" 是 "/" 的 sub-route）所以在 "/"/

之前使用："/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'));

Answer 7

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

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

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 不再按预期工作是正常的。

React Router v4 路由不起作用

React Router v4 routes not working

reactjs

react-router

react-router-v4