react 项目taken失效跳转到登陆页如何实现

在React中实现跳转到登录页有多种方式，以下是其中一种：

1. 安装React Router

在React中，可以使用React Router来实现页面路由和跳转。首先需要使用npm安装React Router：

npm install react-router-dom

2. 创建路由组件

在React中，可以使用路由组件来定义不同的页面，路由组件可以包含其他组件或页面。可以创建一个名为`Routes.js`的文件来定义路由组件：

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

import Login from './Login';
import Home from './Home';

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/login" component={Login} />
        <<Route exact path="/home" component={Home} />
      </Switch>
    </Router>
  );
};

export default Routes;

在上面的代码中，使用`BrowserRouter`作为路由组件的容器，`Switch`组件用于匹配路由路径和组件，使用`Route`组件定义路由路径和对应的组件。

3. 创建登录组件

可以在`Login.js`文件中创建登录组件：

import React from 'react';
import { useHistory } from 'react-router-dom';

const Login = () => {
  const history = useHistory();

  const handleLogin = () => {
    // 处理登录逻辑，登录成功后跳转到首页
    history.push('/home');
  };

  return (
    <div>
      <h1>登录页</h1>
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

export default Login;

在上面的代码中，使用`useHistory`钩子获取`history`对象，调用`push`方法跳转到首页。

4. 实现失效处理

可以在`Home.js`文件中实现失效处理，如果用户在未登录的情况下访问首页，可以自动跳转到登录页：

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const Home = () => {
  const history = useHistory();

  useEffect(() => {
    // 判断用户是否登录，如果未登录则跳转到登录页
    const isLoggedIn = false; // 这里暂时写死，实际应该根据用户状态来判断
    if (!isLoggedIn) {
      history.push('/login');
    }
  }, [history]);

  return (
    <div>
      <h1>首页</h1>
    </div>
  );
};

export default Home;

在上面的代码中，使用`useEffect`钩子来判断用户是否登录，如果未登录则跳转到登录页。

5. 渲染路由组件

最后，在`App.js`文件中渲染路由组件：

import React from 'react';
import Routes from './Routes';

const App = () => {
  return <Routes />;
};

export default App;

在上面的代码中，直接渲染`Routes`组件即可。