我有一些路线,我添加了标题,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。
你正在以错误的方式使用它。试试这种方式:
// 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>
);
我在沙箱中试过你的例子: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';
在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,那么您在原始代码中传递了一个未知道具(可能通过传递样式?)。