React Router Match Miss
And to add to the last post, you'll find this in react-router-dom
. It's no longer in the react-router core library.
Here's a pattern I have found works for react routing. Same as previous posters, basically. You'll need to build the additional components included.
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
{/* Import your components here */}
class Root extends React.Component{
render(){
return(
<Router>
<Switch>
<Route exact path='/' component={App} /> )} />
<Route path="/some-component" component={SomeComponent} />
<Route component={NotFound}/>
</Switch>
</Router>
);
}
}
render(<Root/>, document.querySelector('#main'));
<Match>
and <Miss>
were components in the alpha release of React Router v4.
In the beta, <Match>
has been renamed <Route>
(and its props have changed so that pattern
is now path
and exactly
is exact
). The <Miss>
component was removed entirely. Instead you should use a <Switch>
statement, which will only render the first <Route>
(or <Redirect>
) that is matched. You can add a pathless component as the last child of the <Switch>
's routes and it will render when none of the preceding <Route>
s match.
You can check out the API documentation for more details.
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
// The following <Route> has no path, so it will always
// match. This means that <NoMatch> will render when none
// of the other <Route>s match the current location.
<Route component={NoMatch} />
</Switch>