React Router v4全局与嵌套路由子项不匹配

Question

当我在React Router V4中具有嵌套路由时，如何将用户重定向到NoMatch组件？

这是我的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

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

const Register = ({ match}) => {
    return (
        <div>
            <Route exact path={match.url} render={() => {return <h1>Register</h1>} } />
            <Route path={`${match.url}/detail`} render={()=>{return <h1>Register Detail</h1>}} />
        </div>
    )
}

const App = () => (
    <Router>
        <Switch>
                <Route exact path="/" render={() =>  {return <h1>Home</h1> }} />
                <Route path="/register" component={Register} />
                <Route component={() => {return <h1>Not found!</h1>}} />
        </Switch>
    </Router>
);

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

如您所见，Register下方有一个NoMatch路由，但我不想在子组件Register上使用相同的Route映射。 这样，如果我转到/ register / unregisteredmatch，则该页面将显示为空白，因为不输入NoMatch Route。

如何在不指定子路线的情况下映射全局NoMatch？ 我不想将此责任传递给子组件。

谢谢。

Answer 1

我对Switch有相同的问题，因为如果我不转到/ a，以下内容将始终呈现我的NoMatch组件

<Router history={history}>
  <Switch>
    <Route path='/a' component={A} />
    <Switch>
      <Route path='/b' component={B} />
      <Route path='/b/:id' component={C} />
    </Switch>
    <Route path="*" component={NoMatch}/>
  </Switch>
</Router>

但是，如果您按如下方式将NoMatch移入嵌套的Switch中 ，它将可以正常工作：

<Router history={history}>
  <Switch>
    <Route path='/a' component={A} />
    <Switch>
      <Route path='/b' component={B} />
      <Route path='/b/:id' component={C} />
      <Route path="*" component={NoMatch}/>  
    </Switch>
  </Switch>
</Router>

即使这是问题的“解决方案”，也不是您想要的，因为第二个Switch与第一个Route一样在不同的文件中。

因此，随着应用程序的增长以及更多路由在不同文件中起作用，您永远都不知道需要将NoMatch路由放置在何处以使其按预期工作。

您是否找到其他解决此问题的方法？

Answer 2

您可以做的是在根应用程序中定义所有可能允许的路由。 因此，请使用可选模式修改您的App组件，如下所示：

const App = () => (
    <Router>
        <Switch>
                <Route exact path="/" render={() =>  {return <h1>Home</h1> }} />
                <Route path="/register/(detail)?" exact component={Register} />
                <Route component={() => {return <h1>Not found!</h1>}} />
        </Switch>
    </Router>
);