麻煩轉換路由到V4

Question

我已用反應路由器V3下列路線配置：

<Route component={App}> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="/" component={Admin}> 
    <IndexRoute component={Dashboard} /> 
    <Route path="profile" component={Profile} /> 
    </Route> 
</Route> 

我嘗試以下使用V4：

<Router> 
    <div id="app"> 
    <Match pattern="/login" component={Login} /> 
    <Match pattern="/logout" component={Logout} /> 
    <Match pattern="/" component={Admin} /> 
    </div> 
</Router> 

和內部Admin部件：

<div id="admin"> 
    <Match pattern="/" component={Dashboard} /> 
    <Match pattern="/profile" component={Profile} /> 
</div> 

問題：

1. 當我訪問/login,Admin組件也匹配。
2. 我試過換成<Match pattern="/" exactly component={Admin} />。它不呈現Admin組件中的子匹配。所以當我訪問/profile時，它沒有匹配。

Answer 1

嵌套與v4仍然有點不相干，但它仍然在alpha，所以不應該太意外。

正如你所定義的代碼，沒有做你想要什麼好方式。一個可能的解決方案是有一個withAdmin高階組件，它將呈現您的管理HTML用於包裝組件。

const withAdmin = (Component) => { 
    return (matchProps) => (
    <div id="admin"> 
     <Component {...matchProps} /> 
    </div> 
) 
} 

，你會使用像：

<Router> 
    <div id="app"> 
    <Match pattern="/login" component={Login} /> 
    <Match pattern="/logout" component={Logout} /> 
    <Match exactly pattern="/" component={withAdmin(Dashboard)} /> 
    <Match pattern="/profile" component={withAdmin(Profile)} /> 
    </div> 
</Router> 

這是不理想的，但它應該工作。

也有可能最終版本將包含一個<Match___>組件，該組件接受一組模式並僅渲染與第一個匹配模式相關聯的組件。這對你的問題是一個真正的解決方案，但它還不存在。

<Match___ routes={[ 
    { pattern: '/login', component: Login }, 
    { pattern: '/logout', component: Logout }, 
    { pattern: '/', component: Admin } 
]} /> 

Answer 2

我一直在使用交換機模塊已工作了好了，我至今嵌套的路線：

<Router> 
    <App> 
    <Switch> 
     <Route exactly pattern="/" component={Home} /> 
     <Route pattern="/about" component={About} /> 
     <Route pattern="/etc" component={Etc} /> 
    </Switch> 
    </App> 
</Router> 

您也可以使用，例如，子導航組件的內部開關。