react-router v4嵌套'Miss`裏面的'Match`

Question

在嵌套在未命中的匹配之間進行轉換時遇到問題。下面是一個簡單的例子。重現/ adapters和/ users之間的行爲轉換。取決於你從哪裏開始其中一個不會渲染。但是日誌總是出現在控制檯中。

我是不是正確使用Miss還是這是一個錯誤？

codepen：http://codepen.io/slightlytyler/pen/wgzbRE

Root.js

import React from 'react'; 
import { BrowserRouter, Link, Match, Miss } from 'react-router'; 

const Root =() => (
    <BrowserRouter> 
    <div> 
     <Link to="/auth">Auth</Link> 
     <Link to="/adapters">Adapters</Link> 
     <Link to="/users">Users</Link> 
     <Match 
     pattern="/auth" 
     render={() => <div>auth</div>} 
     /> 
     <Miss 
     render={() => (
      <div className="app-layout"> 
      App Layout 
      <Match 
       pattern="/adapters" 
       render={() => { 
       console.log('render adapters'); 
       return <div>Adapters</div>; 
       }} 
      /> 
      <Match 
       pattern="/users" 
       render={() => { 
       console.log('render users'); 
       return <div>Users</div>; 
       }} 
      /> 
      </div> 
     )} 
     /> 
    </div> 
    </BrowserRouter> 
); 

export default Root; 

Answer 1

好了，所以答案是反應路由器V4.0.0-alpha.6壞了。我已經轉向使用master以及新的API，並已經讓我的代碼按預期工作。這是我如何完成我的問題。

Root.js

import React from 'react'; 
import { BrowserRouter, Link, Route, Switch } from 'react-router'; 

const Root =() => (
    <BrowserRouter> 
    <div> 
     <Link to="/auth">Auth</Link> 
     <Link to="/adapters">Adapters</Link> 
     <Link to="/users">Users</Link> 
     <Switch> 
     <Route 
      path="/auth" 
      render={() => <div>auth</div>} 
     /> 
     <Route 
      render={() => (
      <div className="app-layout"> 
       App Layout 
       <Route 
       path="/adapters" 
       render={() => { 
        console.log('render adapters'); 
        return <div>Adapters</div>; 
       }} 
       /> 
       <Route 
       path="/users" 
       render={() => { 
        console.log('render users'); 
        return <div>Users</div>; 
       }} 
       /> 
      </div> 
     )} 
     /> 
     </Switch> 
    </div> 
    </BrowserRouter> 
); 

export default Root;