React Router v4 路由不起作用

IT技术 reactjs react-router react-router-v4
2021-03-24 02:20:56

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

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

6个回答

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

嗯，对不起，但我遇到了类似的问题，尽管我添加了精确但仍然无法正常工作
2021-05-30 02:20:56
@akshaykishore 您应该提出一个新问题，并向我们提供您正在使用的代码，以重现您的问题。
2021-06-04 02:20:56
代码类似，除了我从另一个文件导入组件。顺便刷新第二个页面组件被渲染。
2021-06-22 02:20:56

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

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

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

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

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

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

无需输入exact关键字

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

这样你就可以省略准确以及

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'));
其它你可能感兴趣的问题
上一篇JavaScript 和 JSX 有什么区别？ 下一篇Next.js：带状态的 Router.push