阵营路由器V4全球不匹配嵌套航线童车

Question

我怎样才能将用户重定向到一个NOMATCH组件，当我在嵌套路线阵营路由器V4？

这里是我的代码：

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

你可以看到，下面有一个注册路线NOMATCH，但我不想用我的子组件注册相同的路由映射。这样，如果我去/注册/未注册匹配页面只显示空白，因为不输入NoMatch路由。

我该如何映射一个全球NOMATCH没有指定我的孩子的路线？我不想将这种责任传递给子组件。

谢谢。

Answer 1

你可以做的就是定义在你的根应用都可能允许路线。因此，使用可选的模式如下调整您的应用程序组件：

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

Answer 2

我有开关同样的问题，因为下面将始终使我NOMATCH成分，如果我没有去/ A

<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嵌套开关里面是这样的：

<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> 

即使这是一个“解决方案”的问题，这是不是你想要的，因为第二开关是在不同的文件中像第一路线什么为好。

随着应用程序的增长和更多的路线进入不同的文件，你永远不知道在哪里你需要把NoMatch路线让它按预期工作。

你有没有发现任何其他办法解决这个问题？