手动重新加载或键入URL始终重定向到root

时间:2018-01-07 18:33:38

标签: reactjs react-router react-router-v4 react-router-dom

标题说明了一切。

当我在浏览器中手动输入网址或尝试刷新时,它总是回到root,有什么问题吗?因为我没有得到它。

当我手动刷新或输入网址并且我已登录时,它会转到仪表板,当我没有登录时,它会进入登录页面。

这是我的代码

 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>

这是我的道具路线

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);
    }} />
  );
};

和我的私人路线

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 }
          }} />
        );
    }} />
  );
};

注意:我也在使用Redux和Redux Saga。

1 个答案:

答案 0 :(得分:0)

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 }
          }} />
        );
    }} />
  );
};

会说你应该检查你的user.logged是否没有改变,如果你在手动更改网址时重新渲染应用程序可能就是这种情况。 您可以使用localstorage来检查用户是否确实已记录。