反应路由器开关没有按预期工作

Question

我正在学习 React 并卡在了 react-routes

考虑以下几点：

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import HelloWorld from "./HelloWorld.jsx";

const Root = () => {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/" exact component={HelloWorld} />
          <Route component={NoMatch} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

function NoMatch({ location }) {
  return (
    <div>
      <h3>
        No match found
      </h3>
    </div>
  );
}

export default Root;

在“/”这条路线上，它按预期呈现 HelloWorld 组件，但在其他路线上例如 abc 它显示 Cannot GET /abc 而不是 No match found

Answer 1

这对我来说似乎适用于最新的 React 和 react-router-dom。

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

const HelloWorld = () => {
return <div>Hello World</div>;
};

const Root = () => {
return (
    <BrowserRouter>
        <div>
            <Switch>
                <Route path='/' exact component={HelloWorld} />
                <Route component={NoMatch} />
            </Switch>
        </div>
    </BrowserRouter>
  );
};

function NoMatch() {
  return (
    <div>
        <h3>No match found</h3>
    </div>
  );
}

export default Root;

Code sandbox link to try it out

Answer 2

查看沙箱，它将对您有所帮助：

https://codesandbox.io/s/py114mqzj0

请按如下方式升级您的依赖项：

"dependencies": {
    "react": "16.5.2",
    "react-dom": "16.5.2",
    "react-router-dom": "4.3.1",
},

Answer 3

如果您使用 create-react-app 设置 React 项目，代码工作正常，但如果您使用 webpack 配置手动设置项目，则需要 devServer: {historyApiFallback: true,} 才能使 React 路由正常工作.

Answer 4

发生这种情况是因为您的服务器未设置为专门处理这些路由。服务器决定什么存在什么不存在——react-router 只是一个可以稍微利用它的工具。

修复 1

您可以通过从 react-router-dom 包导入 HashRouter 而不是 BrowserRouter.

来避免这个问题

结果将是基于 URL 的路由，并在路由本身前面加上 #/。所以你 / 的路线现在实际上是 #/.

修复 2

设置反向代理 (nginx) 作为从 Node.js 服务器为您的页面提供服务的中介。如果您知道需要更具体的配置，请使用广泛的通配符或进行具体的配置。它会将请求 URI/path 传递给节点，但不会每次都尝试将它们用作单独的端点或从文件系统读取文件。

Answer 5

首先你检查你的 React 版本然后如果 v5.1 及更高版本就这样做

为了使用 v6，您需要将所有元素转换为 <Routes>

您想将组件替换为

示例：- App.js

import Home from "./Home";
import About from "./About";

import {BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}


export default App;

在那之后，您的开关相关错误可能消失了！如果还是不行评论我我会帮助你

反应路由器开关没有按预期工作

react-router switch not working as expected

javascript

reactjs

react-router

react-router-dom

react-component