CODEWITHSUNDEEP
reactjsreact-router
Ole EH Dufour
Ole EH Dufour

Reputation: 3240

reactjs components are all displaying

After having logged on I just want the Administrate component to come up, but my Login component is still displaying as well.

boot-client.tsx :

import * as RoutesModule from './routes';

    function renderApp() {
        ReactDOM.render(

            <AppContainer>
                <Provider store={store}>
                    <ConnectedRouter history={history} children={routes} />
                </Provider>
            </AppContainer>
            ,
            document.getElementById('react-app')
        );
    }

routes.tsx:

export const routes = <div>   
<PrivateRoute  component={FetchData} />
<Route path='/' component={Logon} />
<Route path='/administrate' component={Administrate } />  
  </div>
 ;

my component 'PrivateRoute' is as follows and needs to redirect to the administrate component after having logged in:

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        localStorage.getItem('user')
            ? <Redirect to={{ pathname: '/administrate', state: { from: props.location } }}/>
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

Can somebody point me in the right direction? What am I overlooking? Thanks a million.

Upvotes: 1

Views: 48

Answers (2)

Lorenz Wei&#223;
Lorenz Wei&#223;

Reputation: 319

thats because the url matches to both paths. Additionally I would surround it with a <Switch> which forces it to only display one of them. This is nice for adding a default path as-well, otherwise the default path will always gets displayd

Upvotes: 3

Gabriel Bleu
Gabriel Bleu

Reputation: 10204

Add exact to your / route else both / and /administrate will match.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#exact-bool

Upvotes: 3

Related Questions