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

问题描述 投票:0回答:3

我有一些路线,我添加了标题,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。

javascript reactjs react-router-dom
3个回答
2
投票

你正在以错误的方式使用它。试试这种方式:

// 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>
  );

1
投票

我在沙箱中试过你的例子: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';

0
投票

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,那么您在原始代码中传递了一个未知道具(可能通过传递样式?)。

© www.soinside.com 2019 - 2024. All rights reserved.