React Router v4 全局与嵌套路由子项不匹配 [英] React Router v4 global no match to nested route childs

问题描述

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

这是我的代码:

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'react-tap-event-plugin'导入injectTapEventPlugin；注入TapEventPlugin();进口 {BrowserRouter 作为路由器，路线，转变}来自'react-router-dom';从./website/Website"导入网站；const 寄存器 = ({匹配}) =>{返回 (<div><路由精确路径={match.url} render={() =>{返回<h1>注册</h1>}}/><路由路径={`${match.url}/detail`} render={()=>{return <h1>注册详情</h1>}}/>

)}const App = () =>(<路由器><开关><路由精确路径="/" render={() =>{返回<h1>家</h1>}}/><Route path="/register" component={Register}/><路由组件={()=>{return <h1>未找到！</h1>}}/></开关></路由器>);ReactDOM.render(<App/>, document.getElementById('root'));

如您所见，Register 下面有一个 NoMatch 路由，但我不想在我的子组件 Register 上使用相同的 Route 映射.这样，如果我去/register/unregisteredmatch 页面只显示空白，因为没有进入 NoMatch Route.

如何在不指定子路由的情况下映射全局 NoMatch?我不想将这种责任传递给子组件.

谢谢.

解决方案

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

<开关><Route path='/a' component={A}/><开关><Route path='/b' component={B}/><Route path='/b/:id' component={C}/></开关><Route path="*" component={NoMatch}/></开关></路由器>

但是，如果您像这样将 NoMatch 移动到嵌套的 Switch 中，它将按预期工作:

<开关><Route path='/a' component={A}/><开关><Route path='/b' component={B}/><Route path='/b/:id' component={C}/><Route path="*" component={NoMatch}/></开关></开关></路由器>

即使这是问题的解决方案"，也不是您想要的，因为第二个 Switch 与第一个 Route 一样位于不同的文件中.

因此，随着应用程序的增长以及更多路由在不同文件中发挥作用，您永远不知道需要将 NoMatch 路由放在哪里才能使其按预期工作.

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

How can I redirect the user to a NoMatch component when I have nested routes in React Router V4?

Here is my code:

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

As You can see, there is a NoMatch route below Register but I don't want to use the same Route mapping on my child component Register. In this way, if I go to /register/unregisteredmatch the page just show blank because do not enter in NoMatch Route.

How can I map a global NoMatch without specify that on my child route? I don't want to pass this responsability to the child components.

Thanks.

解决方案

I have the same problem with Switch since the following will always render my NoMatch component if I do not go to /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>

However, it will work, as expected, if you move your NoMatch inside the nested Switch like this:

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

Even if this is a 'solution' to the problem it is not what you want since the second Switch is in a different file like the first Route is as well.

So as the application grows and more routes come into play in different files you never know where you need to put the NoMatch route for it to work as expected.

Did you find any other solution to this problem?

这篇关于React Router v4 全局与嵌套路由子项不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！