CODEWITHSUNDEEP
javascriptreactjsreact-router
jrSakizci
jrSakizci

Reputation: 171

React Router v4 - Nested Routes are not working

These are my main routes in Router.js

const Routes = () => {
    return ( 
        <Switch>
            <Route path="/" exact component={HomePage} />
            <Route path="/dashboard" component={Dashboard} />
        </Switch>
    );
}

And these are my nested routes under the homepage. Right now Dashboard and HomePage is working but Forget-Password and Sign-up are not working. I can only see WHITE BLANK PAGE WITHOUT ERROR.

render() {
     const {match} = this.props;
    return (
        <div className="container home-grid">
            <div className="featured">
                <Featured />
            </div>
            <div className="home-forms">
                <div className="logo">
                    <Logo />
                </div>
                <TransitionGroup className="route-page">
                    <CSSTransition
                        key={location.pathname}
                        timeout={{ enter: 800, exit: 800 }}
                        classNames="page"
                    >
                        <section className="route-section">
                            <Switch>
                                <Route exact path={match.path} component={SignIn}/>
                                <Route path={`${match.path}forgot-password`} component={ForgotPassword} />


                            </Switch>
                        </section>
                    </CSSTransition>
                </TransitionGroup>
                <div className="footer-text">
                    <Text specialClass="footer"></Text>
                </div>
            </div>
        </div>
    )
}

Sign in is rendering but other routes are not. What am I doing wrong?

Upvotes: 1

Views: 4186

Answers (2)

jrSakizci
jrSakizci

Reputation: 171

Problem was "order" i put HomePage route after Dashboard, it is working now.

Upvotes: 0

stilllife
stilllife

Reputation: 1806

What is happening when you reach the route /forgot-password is that the HomePage route does not match anymore because of exact resulting in unmounting the entire Home component and so it unmounts also the subroutes.

You have to move the subroutes one level up, for example in your Routes.js next to where you define the home route. Or you can remove exact and threat the Home component as component that renders all the common elements (e.g. the header and the footer) but in this case I would not call it Home but maybe Main or so.

Upvotes: 6

Related Questions