React Router v4 globalネストされたルートの子に一致しない

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

あなたが見ることができるように、そこに登録以下NOMATCHルートがあるが、私は私の子コンポーネントの登録に同じルートマップを使用したくない：

は、ここに私のコードです。このようにして、私が/ register/unregisteredmatchに行くと、NoMatch Routeに入力しないので、ページは単に空白になります。

私の子供のルートで指定しないで、グローバルNoMatchをマップするにはどうすればよいですか？子コンポーネントにこの責任を渡すことは望ましくありません。

ありがとうございました。

Answer 1

あなたができることは、ルートアプリケーションで可能なすべてのルートを定義することです。私は

/に行っていない場合は、次はいつも私の NOMATCHコンポーネントをレンダリングしますので、

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を移動した場合

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

しかし、それは、予想通り、動作します。

これが第二 スイッチがも同様である第一 ルートのような別のファイルにあるので、それはあなたが望むものではない問題の「解決策」であっても

<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のルートを予想どおりに動作させる必要があるかわかりません。

他の解決方法がありますか？