These are my main routes in Router.js

const Routes = () => {
    return ( 
        <Switch>
            <Route path="/" exact ponent={HomePage} />
            <Route path="/dashboard" ponent={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} ponent={SignIn}/>
                                <Route path={`${match.path}forgot-password`} ponent={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?

These are my main routes in Router.js

const Routes = () => {
    return ( 
        <Switch>
            <Route path="/" exact ponent={HomePage} />
            <Route path="/dashboard" ponent={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} ponent={SignIn}/>
                                <Route path={`${match.path}forgot-password`} ponent={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?

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Sep 13, 2018 at 9:45 Omid Nikrah 2,48033 gold badges1616 silver badges3131 bronze badges asked Sep 13, 2018 at 6:58 jrSakizcijrSakizci 17122 silver badges1414 bronze badges 4

• Need some clarification: you first say Sign-up is not working then Sign in is rendering. First you say white blank page then you say the other routes are not rendering. To recap this is what I understand: / works, /dashboard works, that code you show is the Home ponent , / is also the route for Signin, Signup does not exist and /forgot-password is giving you a white page. So seems like the routing works fine. The white page is caused by nothing being rendered on that ponent? – stilllife Commented Sep 13, 2018 at 7:18
• Thx for your answer. Let me be more clear. Dashboard and HomePage is working, clearly. In home page as you can see i have forgot-password route and rendering sign in ponent as a start. I removed Sign Up route so, forgot-password is not working right now. It only shows blank page. Nothing more, not rendering, not doing anything. Its like forgot-password route doesnt even exist.. – jrSakizci Commented Sep 13, 2018 at 7:21
• But are you rendering something in the ForgotPassword ponent? – stilllife Commented Sep 13, 2018 at 7:23
• Of course i am. My ponents are ready and was working. If i remove "exact" from Home route in Router.js, then Nested routes are working but Dashboard is not. – jrSakizci Commented Sep 13, 2018 at 7:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 ponent 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 ponent as ponent that renders all the mon elements (e.g. the header and the footer) but in this case I would not call it Home but maybe Main or so.

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