Question

我有一些添加了header，div和sidemenu的路由。除了这些，我还添加了“找不到页面”路由。但是当我点击无效的URL时，它没有显示“找不到页面”页面

我已经尝试将所有路由放到“ div”中，但对于“找不到页面”页面，我不需要这些div，标题和侧菜单。

<Switch>
            <Route path="/" exact component={LoginPage} />
            <Route path="/ShowReport" component={ShowReport} />

            <div className="container-fluid py-5">
              <Header />
              <Notify />
              <div className="row justify-content-center pt-2">
                <Sidemenu />
                <Route path="/test" component={Test} />
                <Route path="/home" component={HomePage} />
              </div>
            </div>
            <Route component={NotFoundPage} />
          </Switch>

预期结果是：当我命中无效URL时，应显示找不到没有标题，sidemnu的页面。

Answer 1

您使用错误的方式。尝试这种方式：

// import 
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

// your class's return
return (
    <Router>
      <Switch>
        <Route path="/" exact component={LoginPage} />
        <Route path="/ShowReport" component={ShowReport} />

        <div className="container-fluid py-5">
          <Header />
          <Notify />
          <div className="row justify-content-center pt-2">
            <Sidemenu />
            <Route path="/test" component={Test} />
            <Route path="/home" component={HomePage} />
          </div>
        </div>
        <Route component={NotFoundPage} />
       </Switch>
    </Router>
  );

Answer 2

我已在沙箱https://reacttraining.com/react-router/web/example/basic中尝试过您的示例，并收到Invariant failed: You should not use <Switch> outside a <Router>错误。

尝试用如下导入的Switch包裹Router：

import { BrowserRouter as Router } from 'react-router-dom';

Answer 3

在routing a No-Match的主要示例中，Switch元素包装在Router元素中，如下所示：

 <Router>
     <Switch>
            <Route path="/" exact component={LoginPage} />
            <Route path="/ShowReport" component={ShowReport} />
            <Route component={NotFoundPage} />
     </Switch>
 </Router>

如果这仍然不能解决您的问题，请尝试将<Route component={NotFoundPage} />暂时粘贴到div上方，这是否仍显示空白页或进行任何更改。

如果这导致notfoundpage出现，则说明您正在原始代码中传递一个未知的道具（可能是通过样式传递的？）。

当在div中定义路由时，不显示React Router的“找不到页面”页面

3 个答案: