react-router 重定向不会更改 Switch 中的 url [英] react-router redirect doesn't change url in Switch

问题描述

我正在使用 react-router 来设置我的应用程序，并尝试使用 <Redirect/> 来设置路由器进行身份验证.

I'm using react-router to set up my application, and try to use <Redirect/> to set router for authentication.

Route组件有两个不同的组件，一个是private Route，另一个是public route.

Routecomponent have two different components, one is private Route, another is public route.

预期结果:当 auth 为 false 时，页面应该跳回公共页面，我设置了 <Redirect to={"/public"}/>到目前为止，路由似乎工作正常，但重定向无法正常工作.欢迎任何想法！谢谢！！

Expect result : when auth is false, the page should jump back to a public page, which I set <Redirect to={"/public"} /> so far it seems route works fine, but redirect doesn't work properly. Any ideas are welcome! Thanks!!

私有路由

interface PrivateRouteProps {
  isLogin: boolean;
  privateRoutes: RouteItem[];
}

const PrivateRoute: React.FunctionComponent<PrivateRouteProps> = (
  props: PrivateRouteProps
) => {
  return (
    <>
      {props.isLogin ? (
        props.privateRoutes.map(item => {
          return <Route key={item.path} {...item} />;
        })
      ) : (
        <Redirect to={PUBLIC.path} />
      )}
    </>
  );
};

公共路由

interface PublicProps {
  publicRoutes: RouteItem[];
}

const PublicRoute: React.FC<PublicProps> = (props: PublicProps) => {
  return (
    <>
      {props.publicRoutes.map(route => (
        <Route key={route.path} {...route} />
      ))}
    </>
  );
};

路线

<BrowserRouter>
      <Switch>
        <PublicRoute publicRoutes={publicRoutes} />
        <PrivateRoute privateRoutes={privateRoutes} isLogin={login} />
      </Switch>
    </BrowserRouter>

更新正如所提到的接受的答案，这完全是关于 <Switch/> 与 Fragment 一起工作，所以我修改了我的路线如下，它就像一个魅力.只是更新它，因为有人可能有类似的问题.

UPDATE As the accepted answer mentioned, it's all about <Switch/> works with Fragment, so I modified my routes as following, it works like a charm. Just update it for someone may have similar question.

<BrowserRouter>

            <Switch>
                {publicRoutes.map(item => {
                    return <Route key={item.path} {...item}/>
                })}
                {privateRoutes.map(item => {
                    return <PrivateRoute key={item.path}
                                         exact={item.exact}
                                         component={item.component}
                                         path={item.path}
                                         redirectPath={SIGN_IN.path}
                    />

      })}
            </Switch>
        </BrowserRouter>

推荐答案

我已经检查了你的代码，归结为一件事.组件 与片段 <> 一起工作的方式.它只寻找第一个 React Fragment 因为他们不想横穿一棵树:

I have gone through your code and boils down to one thing. The way that the component <Switch> works with fragment <></>. It only looks for the first React Fragment because they do not want to transverse a tree:

https://github.com/ReactTraining/react-router/issues/5785

要解决这个问题，您需要删除组件内的 React.Fragment.因此，您的应用程序将如下所示:

To solve that you need to either remove the React.Fragment inside your components. So your application will look like:

<Switch> 
    <Route ...>
    <Route ...>
    <Route ...>
</Switch>

和不是(顺便说一句，现在是这样)

      <Switch> 
    //it will only sees the first one //if you switch orders - Private with Public
    // Private will work but not Public anymore :(
        <React.Fragment>
            <Route ...>
            <Route ...>
        </React.Fragment>
        <React.Fragment>
            <Route ...>
        </React.Fragment>
     </Switch>

另一个解决方案(这是我所做的，因为我对 TypeScript 不够精通，无法更改类型和返回)是在您的 switch 应用程序中添加一个 wrapper 并处理私有的返回使用 中的 render 方法进行路由，如下所示:

Another solution (that is what I did because I am not well versed in TypeScript enough to change types and returns) is to add a wrapper in your switch application and deal with the return of the private Routes using the render method inside the <Route> as demonstrated below:

  //index.tsx
        <Switch>
            <>
            <PublicRoute publicRoutes={publicRoutes}/>
            <PrivateRoute privateRoutes={privateRoutes} isLogin={login}/>
            </>
        </Switch>

这会导致无限循环重新渲染的另一个错误(同样，react-router 可能 在嵌套路由上遇到了不好的时间)并且要解决这个问题，您将对 PrivateRoutes 执行以下操作组件:

That leads to another error of infinite loops re-renders (again the react-router is probably having a bad time with the nested routes) and to solve that you would do the following to your PrivateRoutes component:

  //PrivateRoute.tsx
return (
    <>
        {props.privateRoutes.map(item =>
            <Route key={item.path} exact path={item.path} render={() => (
                !props.isLogin
                    ? (
                    <Redirect to={PUBLIC.path}/>
                ):
                    //HOC transforming function Component into Component
                    // @ts-ignore (you can deal here better than me hehehe)
                    ((PrivateComponent)=><PrivateComponent/>)(item.component)
            )}/>)}
    </>
);

TL,DR:您通过添加 <></>(转换为 React.Fragment) 在您的结构中.如果你删除它们或按照上面的代码你应该没问题

TL,DR: You are adding nesting complexity by adding <></> (translates to React.Fragment) inside your structure. If you remove them or follow the code above you should be fine

希望我对你有所帮助.祝你好运！:)

Hope I have helped it you. Good luck! :)

这篇关于react-router 重定向不会更改 Switch 中的 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！