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;