React-router: V4: reload or typing url manually always redirect to root

Created on 7 Jan 2018 · 4Comments · Source: ReactTraining/react-router

The title says it all.

When I type a url manually in a browser or try to refresh, it always goes back to root, is there any thing wrong? because I'm not getting it.

When I refresh or type url manually and I'm logged in it goes to the dashboard, and when I'm not logged in, it goes to login page.

Here is my code

     import { Switch, Route, Redirect, Router } from 'react-router-dom';

     <Provider store={this.props.store}>
        <IntlProvider locale={this.props.locale} messages={this.props.localeData}>
          <LocaleProvider locale={enUS}>
            <Router history={history}>
              <Switch>
                <Route exact path="/" render={() => (<Redirect to="/dashboard" />)} />
                <PrivateRoute path="/dashboard" component={App} locale={this.props.locale} redirectTo="/login" />
                <PropsRoute path="/login" component={Login} />
                <PropsRoute path="/reset-password" component={ResetPassword} />
                <PropsRoute path="/loader" component={Loader} spinning={true} fullScreen={true} />
                <Route component={NoMatch} />
              </Switch>
            </Router>
          </LocaleProvider>
        </IntlProvider>
      </Provider>

this is my props route

const renderMergedProps = (component, ...rest) => {
  const finalProps = Object.assign({}, ...rest);
  return (
    React.createElement(component, finalProps)
  );
};

const PropsRoute = ({ component, ...rest }) => {
  return (
    <Route {...rest} render={routeProps => {
      return renderMergedProps(component, routeProps, rest);
    }} />
  );
};

and my private route

const PrivateRoute = ({ user, component, redirectTo, ...rest }) => {
  return (
    <Route {...rest} render={routeProps => {
      return user.logged ? (
        renderMergedProps(component, routeProps, rest)
      ) : (
          <Redirect to={{
            pathname: redirectTo,
            state: { from: routeProps.location }
          }} />
        );
    }} />
  );
};

Source

IbraheemAlSaady

All 4 comments

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Thanks!