Question

我正在学习反应，并陷入反应路线

请考虑以下内容：

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

看看沙盒，它将对您有帮助：

https://codesandbox.io/s/py114mqzj0

请按如下所示升级您的依赖项：

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

Answer 2

如果您使用create-react-app来设置react项目，那么代码可以正常工作，但是如果您使用webpack配置来手动设置项目，则需要devServer: {historyApiFallback: true,}才能使React路由起作用。 / p>

Answer 3

之所以会这样，是因为您的服务器未设置为专门处理那些路由。在服务器上确定什么存在，什么不存在-react-router只是一个可以利用它的工具。

修复1

您可以通过从react-router-dom包而不是HashRouter导入BrowserRouter来避免此问题。

结果将是基于基于{} {1}}的URL进行路由。因此，您的#/路线实际上将是/。

修复2

设置反向代理（#/）作为中介，以从Node.js服务器提供页面。如果您需要更多特定的配置，请使用广泛的通配符或使用特定的通配符。它将仍然将请求URI /路径传递到节点，但不会每次尝试将它们用作单独的端点或从文件系统读取文件。

Answer 4

这对于我使用最新的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

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

4 个答案: