reactjs - 重新加载或手动输入 URL 始终重定向到 root

Question

标题说明了一切。

当我在浏览器中手动输入网址或尝试刷新时，它总是返回到根目录，有什么问题吗？因为我不明白。

当我刷新或手动输入网址并登录时，它会转到仪表板，当我未登录时，它会转到登录页面。

这是我的代码

 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>

这是我的 Prop 路线

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

和我的私有(private)路线

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。

Answer 1

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 是否没有改变，如果你在手动更改 url 时重新渲染应用程序，可能会出现这种情况。 您可以使用 localstorage 来检查用户是否确实已登录。