陣營路由器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路線讓它按預期工作。

你有沒有發現任何其他辦法解決這個問題？