Tener un problema al hacer la transición entre partidos anidados dentro de un error. A continuación se muestra un ejemplo mínimo. Para reproducir la transición de comportamiento entre /adapters y /users. Dependiendo de dónde comience, uno de ellos no se procesará. Sin embargo, los registros siempre aparecen en la consola.
¿No estoy usando Miss correctamente o es un error?
codepen : http://codepen.io/slightlytyler/pen/wgzbRE
raíz.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;Ok, entonces la respuesta es que el enrutador de reacción v4.0.0-alpha.6 está roto. Cambié a usar master así como la nueva API y obtuve mi código para que funcione como se esperaba. Así es como logré mi problema.
raíz.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;