在 React Router 上，即使刷新也保持在同一页面上

Question

我的站点是使用 MERN 堆栈构建的，当我刷新页面时，它首先显示主页，然后显示用户所在的页面。如何解决这个问题？例如：

如果我刷新 (/profile) 页面然后同时它显示 (/) 然后它重定向到 (/profile)。我想如果我刷新 (/profile) 它应该在同一页面上。

import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, authed, ...rest }) => {
   
    return (
        <Route
            {...rest}
            render={(props) => authed === true
                ? <Component {...props} />
                : <Redirect to={{ pathname: '/', state: { from: props.location } }} />}
        />
    )
}

export default PrivateRoute;

路由器代码：

const App = () => {
  const user = useSelector((state) => state?.auth);

  return (
    <>
    
    <BrowserRouter>
      <Container maxWidth="lg">
        
        <Switch>
          <Route path="/" exact component={Home} />
          
          <Route path="/about" exact component={About} />
          <Route path="/terms" exact component={Terms} />
        
          <PrivateRoute authed={user?.authenticated} path='/profile' component={Profile} />
         
        </Switch>
      
      </Container>
     
    </BrowserRouter>
   
   
 </>
  )
}

export default App;

如何修复以便用户在刷新时停留在同一页面上？问题出在需要身份验证的页面上。

Answer 1

我猜想在安装（=第一次渲染）时你的 user 变量是空的。然后发生了一些异步的事情，你收到了它的一个新值，这导致对 {user?.authenticated} 的新评估导致 true 并导致重定向到你的 /profile 页面。

我必须说我不熟悉 Redux（我在你的代码中看到了 useSelector，所以我假设你使用的是 Redux 存储），但是如果你想避免这种行为，你需要检索正确的 user 挂载时的值或仅在稍后获得时渲染路由组件。

Answer 2

首次对用户进行身份验证时，将凭据（您评估以查看用户是否已通过身份验证的信息。令牌等）存储在 localStorage 中。当然你也必须创建必要的状态。然后在每个渲染器上使用 useEffect 挂钩从 localStorage.

设置凭证状态

function YourComponentOrContext(){
  const[credentials, setCredentials] = useState(null);
  
  function yourLoginFunction(){
    // Get credentials from backend response as response
    setCredentials(response);
    localStorage.setItem("credentials", response);
  }

  useEffect(() => {
    let storedCredentials = localStorage.getItem("credentials");
    if(!storedCredentials) return;
    setCredentials(storedCredentials);
  });
}

在 React Router 上，即使刷新也保持在同一页面上

On React Router, stay on the same page even if refreshed

reactjs

authentication

mern