Question

大家好，

我遇到了一个奇怪的问题，导致我的开发进度停止了好几天。

在我的 React 应用程序中，我使用的是 React-Router（浏览器路由器）。除重定向外，一切正常（链接、路由、切换）。

redirect 正在更改 URL，但不呈现“新”组件。例如。我有一个登录屏幕，提交后我想重定向到用户屏幕。 Url 正在更改为 URL，但屏幕保持空白（呈现的是 Sidenav 而不是显示用户信息的组件）。

有人知道如何解决这个问题吗？控制台中没有错误。

身体组件：

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <PrivateRoute path="/user" component = {User} />
  <Route path="/login">
    <Login/>
  </Route>
  <Route path="/register">
    <Register />
  </Route>
  <NotFound />
</Switch>

私人路线：

const PrivateRoute = ({ component: Component, user, ...rest }) => {
    return (
      <Route {...rest} render={
        props => {
          if (user) {
            return <Component {...rest} {...props} />
          } else {
            return <Redirect to={
              {
                pathname: '/login',
                state: {
                  from: props.location
                }
              }
            } />
          }
        }
      } />
    )
  }
  
  export default PrivateRoute;

Login Screen 的render 方法的返回值，这部分应该在登录时渲染：

return (    
              <Route render={
                props => {
                    return <Redirect to={
                      {
                        pathname: '/user',
                        state: {
                          from: this.props.location
                        }
                      }
                    } />
                  }
                }
               />
          );

在重新加载时一切正常。也可以使用私有路由。

没有错别字。

问候

曼努埃尔

Answer 1

您不应在渲染方法中返回 Route，而应直接返回 Redirect。

有点像

return (
<>
{isLoggedIn ? 
<Redirect to={{
                pathname: '/user',
                state: { from: this.props.location }
             }} />
: LOGIN_FORM_HTML
}
</>
)

反应路由器重定向不呈现

1 个答案: