React-Router v4 adding sub routes

Question

Big noob with react-router v4 and React in general. I'm trying to set up two parent routes: / and /dashboard. / will be the landing page to login/signup/etc and /dashboard will be the authenticated area. I'm having a bit of trouble getting the subroutes working following the docs and this SO answer here

It's pretty simple set-up. Here's my app.js (routes / and /dashboard work fine):

import React from 'react'
import {Route, BrowserRouter, Switch} from 'react-router-dom'
import LandingPage from "./components/landing/LandingPage";
import ETFApp from "./components/dashboard/ETFApp";

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component={LandingPage}/>
                    <Route path="/dashboard" component={ETFApp}/>
                </Switch>
            </BrowserRouter>
        )
    }
}

export default App;

But my LandingPage component has sub routes that don't seem to work, particularly /signup and /login. I have a hunch I'm doing something wrong.:

import React, {PropTypes} from 'react';
import {Link, Route} from 'react-router-dom';
import {ToolbarGroup, ToolbarTitle, RaisedButton, Toolbar} from 'material-ui'
import HomeCard from "./HomeCard";
import LoginPage from "../../containers/LoginPage";
import SignUpPage from "../../containers/SignUpPage";


const LandingPage = ({match}) => {
    return (
        <div>
            <Toolbar>
                <ToolbarGroup>
                    <Link to="/">
                        <ToolbarTitle text="ETFly"/>
                    </Link>
                </ToolbarGroup>
                <ToolbarGroup>
                    <RaisedButton label="Login" primary={true} containerElement={<Link to="/login">Log in</Link>}/>
                    <RaisedButton label="Sign up" primary={true} containerElement={<Link to="/signup">Sign up</Link>}/>
                </ToolbarGroup>
            </Toolbar>
            <Route path={match.url} exact component={HomeCard}/>
            <Route path={`${match.url}/login`} component={LoginPage}/>
            <Route path={`${match.url}/signup`} component={SignUpPage}/>
        </div>
    );
};

LandingPage.propTypes = {
    match: PropTypes.object.isRequired
}

export default LandingPage;

EDIT: I've removed the switch in my LandingPage component as it is similar to the docs here but still no good. I'm also no longer using the match prop:

<Route path="/" component={HomeCard}/>
<Route path="/login" component={LoginPage}/>
<Route path="/signup" component={SignUpPage}/>

It looks like the component isn't being rendered in React Dev Tools:

Any help appreciated. Thanks.

score 2 · Accepted Answer · answered Apr 13 '17 at 13:50

When you use the exact prop, only the provided path will match.

<Route exact path='/' component={LandingPage} />
// only matches the pathname "/"

You would have to remove the exact prop from the route in order for it to match the /login and /signup pathnames. Just doing that would not work, however, because the route would also match the /dashboard pathname. The best way to get around this is to just switch up the order of the two routes within the <Switch>

<Switch>
  <Route path='/dashboard' component={ETFApp}/>
  <Route path='/' component={LandingPage}/>
</Switch>

Wow. You are a genius. I guess I didn't realize that the parent route was still active even if I'm in the sub component. Thanks a lot man. — coolboyjules, Apr 13 '17 at 18:13

React-Router v4 adding sub routes

1 Answers1