在 react-router 1.0.0 中删除了 DefaultRoute 和 NotFoundRoute。

我想强调的是，带星号的默认路由必须在当前层次结构级别的最后才能工作。否则它将覆盖树中出现在它之后的所有其他路由，因为它是第一个并且匹配每个路径。

对于react-router 1、2 和 3

如果要显示 404 并保留路径（与 NotFoundRoute 功能相同）

<Route path='*' exact={true} component={My404Component} />

如果您想显示 404 页面但更改 url（与 DefaultRoute 功能相同）

<Route path='/404' component={My404Component} />
<Redirect from='*' to='/404' />

具有多个级别的示例：

<Route path='/' component={Layout} />
    <IndexRoute component={MyComponent} />
    <Route path='/users' component={MyComponent}>
        <Route path='user/:id' component={MyComponent} />
        <Route path='*' component={UsersNotFound} />
    </Route>
    <Route path='/settings' component={MyComponent} />
    <Route path='*' exact={true} component={GenericNotFound} />
</Route>

对于react-router 4 和 5

保持路径

<Switch>
    <Route exact path="/users" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>

重定向到另一条路线（更改网址）

<Switch>
    <Route path="/users" component={MyComponent} />
    <Route path="/404" component={GenericNotFound} />
    <Redirect to="/404" />
</Switch>

顺序很重要！

在较新版本的 react-router 中，您希望将路由包装在只呈现第一个匹配组件的 Switch中。否则，您会看到呈现多个组件。

例如：

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

import App from './app/App';
import Welcome from './app/Welcome';
import NotFound from './app/NotFound';

const Root = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route exact path="/" component={App}/>
      <Route path="/welcome" component={Welcome}/>
      <Route component={NotFound}/>
    </Switch>
  </Router>
);

ReactDOM.render(
  <Root/>,
  document.getElementById('root')
);

使用新版本的 React Router（现在使用 2.0.1），您可以使用星号作为路由所有“其他路径”的路径。

所以它看起来像这样：

<Route route="/" component={App}>
    <Route path=":area" component={Area}>
        <Route path=":city" component={City} />
        <Route path=":more-stuff" component={MoreStuff} />    
    </Route>
    <Route path="*" component={NotFoundRoute} />
</Route>

此答案适用于 react-router-4。 您可以将所有路由包装在 Switch 块中，它的功能就像 switch-case 表达式，并使用第一个匹配的路由渲染组件。例如）

<Switch>
      <Route path="/" component={home}/>
      <Route path="/home" component={home}/>
      <Route component={GenericNotFound}/> {/* The Default not found component */}
</Switch>

何时使用 exact

没有确切的：

<Route path='/home'
       component = {Home} />

{/* This will also work for cases like https://<domain>/home/anyvalue. */}

确切地说：

<Route exact path='/home'
       component = {Home} />

{/* 
     This will NOT work for cases like https://<domain>/home/anyvalue. 
     Only for https://<url>/home and https://<domain>/home/
*/}

现在，如果您正在接受路由参数，并且结果不正确，您可以在目标组件本身中处理它。例如）

<Route exact path='/user/:email'
       render = { (props) => <ProfilePage {...props} user={this.state.user} />} />

现在在 ProfilePage.js

if(this.props.match.params.email != desiredValue)
{
   <Redirect to="/notFound" component = {GenericNotFound}/>
   //Or you can show some other component here itself.
}

有关更多详细信息，您可以查看此代码：

应用程序.js

ProfilePage.js

根据该文件，该航线被发现，即使资源没有。

注意：这不适用于找不到资源的情况。路由器未找到匹配路径与导致资源未找到的有效 URL 之间存在差异。url course/123 是一个有效的 url 并导致匹配的路由，因此就路由而言，它是“找到”的。然后，如果我们获取一些数据并发现路线 123 不存在，我们不想转换到新路线。就像在服务器上一样，您继续提供 url 但呈现不同的 UI（并使用不同的状态代码）。您永远不应该尝试过渡到 NotFoundRoute。

因此，您始终可以在Router.run()before 中添加一行React.render()以检查资源是否有效。只需将一个 prop 传递给组件或Handler使用自定义组件覆盖组件以显示 NotFound 视图。