Как остановить сброс значения формы при использовании ProtectedRoutes в реакции js

Question

У меня есть antd Form Компонент в моем проекте. И этот компонент защищен созданным мной ProtectedRoute.

//ProtectedRoute 
const ProtectedRoute = ({ component: Component, ...rest }) => (
      <Route
        {...rest}
        render={({ location }) =>
          auth.isAuthenticated ? (
            <Component {...rest} />
          ) : (
            <Redirect
              to={{
                pathname: "/account/login",
                state: { from: location },
              }}
            />
          )
        }
      />
    );


//Route
return (
   <Router>
      <Switch>
          <ProtectedRoute exact path="/" component={CaseSearchPage} />
           //I have another set of routes here
      </Switch>
   </Router>
);

Но в компоненте CaseSearchPage при переключении языка данные формы сбрасываются. Когда я использую Route вместо ProtectedRoute, это работает как ожидалось. Есть ли способ это исправить? Заранее спасибо

Answer 1

Хорошо, я понял это.

Поскольку я использую защищенные маршруты, он перерисовывает весь компонент. Таким образом, даже значения состояния очищаются. Чтобы это исправить, я немного изменил приведенный выше код.

//New protected route
const ProtectedRoute = ({ component: Component, ...rest }) => (
   <Route
      render={({ location }) => (
        <Redirect
           to={{
              pathname: "/account/login",
              state: { from: location },
           }}
         />
      )}
   />
);


//new Route
return (
   <Router>
      <Switch>
         <Route
            exact
            path="/"
            component={auth.isAuthenticated ? CaseSearchPage : ProtectedRoute}
         />         
      </Switch>
   </Router>
);

Вместо проверки auth.isAuthenticated внутри ProtectedRoute, я проверяю это сейчас в Route. Единственная вещь в ProtectedRoute - это Redirect Route.