React-router v5.2 路由不工作，只显示主页

Posted 2023-03-14

【中文标题】React-router v5.2 路由不工作，只显示主页

【英文标题】：React-router v5.2 routes aren't working, only home page is displayed

【发布时间】：2020-11-18 20:29:01

【问题描述】：

我使用的是 5.2 版路由器，我正在尝试在文件 app.js 中创建路由。 我的路线如下所示：

import React from 'react';
import  render  from 'react-dom'; // if you use just render()
import ReactDOM from 'react-dom';
import  BrowserRouter as Router, Route, Switch  from 'react-router-dom';
    ReactDOM.render(
      <Router>
        <div>
          <Switch>
            /* Using the `component` prop */
            <Route exact path="/" component=Homepage />
            <Route path="/display-item" component=DisplayProduct />
            <Route path="/category/:id" component=DisplayCategory />
            <Route path="/product/:id" component=OneProduct />
            <Route path="/checkout" component=CheckOut />
            <Route path="/orderPlaced" component=OrderPlaced />
          </Switch>
        </div>
      </Router>,
      document.getElementById('crud-app'),
    );

问题是只有路由/ 有效。所以只显示主页。

当我尝试访问 http://localhost:8000/#/display-item 时，什么也没有发生。所以我还在主页上，控制台中没有任何警告或错误。

如果我转到http://localhost:8000/display-item，则会收到错误GET http://localhost:8000/display-item 404 (Not Found)

请问有人遇到过类似的问题吗？如何解决？

谢谢！

更新：

【问题讨论】：

你是如何导入Router的？

赞这个import BrowserRouter as Router, Route, Switch from 'react-router-dom';

一切看起来都正确。 localhost:8000/display-item 应该将您带到 DisplayProduct 组件，并且您没有使用 react 路由器收到 404 错误。

在 5.2 版之前，我使用了 3.2.6 版和 hashHistory，一切正常。现在，当我升级到 5.2 版并更改路线时，它无法正常工作。我附上了有问题的图片，所以你可以看到

你在使用 Laravel 吗？看起来像是后端的路由问题。

【参考方案1】：

将 home 路由作为 switch 中的最后一条语句，然后它将起作用。在您的代码中，每条路径都与“/”匹配，因此每次它都会转到主路径。如果将它放在最后，那么它将搜索确切路径。

【参考方案2】：

问题出在后端 Laravel，除了 react 中的路由，你应该在 web.php 文件中定义路由

Route::view('/', 'welcome');
Route::view('/display-item', 'welcome');