Having an issue when transitioning between matches nested inside a miss. Below is a minimal example. To reproduce the behavior transition between /adapters and /users. Depending on where you start one of them will not render. However the logs always appear in the console.
Am I not using Miss correctly or is this a bug?
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;
Ok so the answer is that react-router v4.0.0-alpha.6 is broken. I've switched to using master as well as the new API and have gotten my code to work as expected. Here is how I accomplished my problem.
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;