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

Question

我有一些路线，我添加了标题，div和sidemenu。除此之外，我添加了“未找到页面”路线。但是当我点击无效网址时，它没有显示“找不到网页”页面

我已经尝试将所有路由放在'div'中但我不需要这些div，header，sidemenu for'Page Not Found'页面

<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>

如果这仍然无法解决您的问题，请尝试暂时粘贴div上方的<Route component={NotFoundPage} />，这仍然显示空白页面或更改任何内容。

如果这会导致出现notfoundpage，那么您在原始代码中传递了一个未知道具（可能通过传递样式？）。