Question

我相对较新做出反应，我正在试图弄清楚如何让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”链接时，url会更改为localhost / about，但是没有任何反应。如果我点击刷新，我会得到一个“无法获取/关于”。显然，我做错了什么，但我无法弄清楚是什么。我也在使用Webpack。

Answer 1

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

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

正如评论中所提到的，对于这个简单的事情，我建议使用Create React App来确保您的服务器代码和webpack设置都正确无误。使用create-react-app之后，您只需使用npm安装react路由器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

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

Answer 3

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

args

Psat //总是在结尾

无需放置<Route path ="/about" component = {About} />关键字

Answer 4

在使用 Switch 时，我们需要记住，我们将路由组件指定为从最具体到最通用。在您的情况下，您已在“ / 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'));

Answer 5

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

Answer 6

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

  <Route exect 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>

将组件作为“路由子代”解决了我的页面路由问题，希望对其他人也有帮助

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路由不起作用

7 个答案: