陣營路由器V4全球不匹配嵌套航線童車

我怎樣才能將用戶重定向到一個NOMATCH組件，當我在嵌套路線陣營路由器V4？陣營路由器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沒有指定我的孩子的路線？我不想將這種責任傳遞給子組件。

謝謝。

來源

2017-04-08 yurikilian

您將需要創建特定的，註冊總會渲染不管它裏面有一個匹配的子路徑或無。所以你需要創建爲 –

@ReiDien處理程序。如果我的理解，我需要做的就是創建一個「抽象的」組件encapsuling的NOMATCH處理......我是誰吧？謝謝 – yurikilian

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

來源

2017-04-08 23:25:06 Javaguru

謝謝@Javaguru！我試圖在不指定主文件的情況下解耦我的組件。只是爲了動態導入的目的，因爲我不想在主文件中映射我的路線。我知道我可以根據導入創建一個路徑文件，但是我正在尋找一種方法在我的模塊上執行此操作。 – yurikilian

我有開關同樣的問題，因爲下面將始終使我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路線讓它按預期工作。

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

來源

2017-05-07 12:02:21 bjorgvin

嗨！我認爲這個tois的最佳方法是使用High Order Component來處理找不到的匹配，因爲@ReiDien在上面的評論中解釋過。我還沒有試過。 – yurikilian

我發現不支持嵌套的Switch。因此，在不同文件中配置路由時，您不應該從這些路由中返回Switch。我所做的是返回一個路由數組，持有/ b和/ b /：id路由。 – bjorgvin

陣營路由器V4全球不匹配嵌套航線童車

回答

相關問題