重定向至登录时的上一路径- React路由器v4

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const ProtectedPage = () => {
  // 这里检查用户是否登录，如果没有登录则重定向到登录页面
  const isLoggedIn = checkUserLoginStatus();

  if (!isLoggedIn) {
    return <Redirect to="/login" />;
  }

  return <h1>受保护的页面</h1>;
};

const LoginPage = () => {
  // 在登录成功后，重定向到上一路径
  const redirectToPreviousPath = () => {
    const previousPath = sessionStorage.getItem('previousPath');
    return previousPath ? <Redirect to={previousPath} /> : <Redirect to="/" />;
  };

  return (
    <div>
      <h1>登录页面</h1>
      {/* 登录表单 */}
      {/* 在登录按钮的点击事件中，设置上一路径到sessionStorage */}
      <button onClick={redirectToPreviousPath}>登录</button>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <div>
        <Route exact path="/login" component={LoginPage} />
        <Route exact path="/protected" component={ProtectedPage} />
      </div>
    </Router>
  );
};

export default App;