时间戳

首页 > 解决方案 > 反应路由器未显示“未找到”页面

reactjs - 反应路由器未显示“未找到”页面

问题描述

我似乎无法让我的 NotFound 组件呈现。每当我在 url 中输入一些随机字符（例如：'localhost:3000/asdfasdfasdfasdf'）时，浏览器实际上会指向我的主题组件，没有内容。

这是我设置路线的方式：

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

render(){
  return (
    <div className="App">
      <Router>
        <NavBar />
        <Switch>
         <Route exact path='/' component={HomepageLayout} />  
         <Route exact path='/:topic' component={Topic} />  
         <Route path='*' component={NotFound} />
        </Switch>
      </Router>
    </div>
  );
 }

export default App;

正如一些人建议的那样，我也尝试过不指定路径，但这也不起作用：

<Route component={NotFound} />

有任何想法吗？

标签： reactjsreact-routerreact-router-dom

解决方案

正如您在第二条路线中提到的那样，这将不起作用，因为任何值都可以作为 /:topic 保存，当您像这样添加时，将显示此路线。因为，任何以冒号开头的段都将被视为参数。所以无论如何*路线都不会显示！

推荐阅读