前言
React-Router-Redirect是React应用中的一个关键库，它提供了强大的导航和路由管理功能。本库的主要目的是让开发人员能够在不同页面之间实现流畅的跳转，同时提供了一种重要的功能：重定向。
这个库允许您在用户访问特定URL时将其引导到其他URL，从而改进用户的整体体验。无论是在用户登录后将其导航到个人仪表板，还是在错误页面上自动将其重定向到主页，React-Router-Redirect都可以实现。
Redirect
- 资源重定向, 也就是可以在访问某个资源地址的时候重定向到另外一个资源地址
- 例如: 访问 /user 重定向到 /login
假如说我现在需要实现这么一个功能就是当用户登陆过了之后访问 /user 时就显示用户相关的组件信息，否则跳到登录界面进行登录才可访问。
新建 User.js:
import React from 'react'; import {Redirect} from 'react-router-dom'; class User extends React.PureComponent { constructor(props) { super(props); this.state = { isLogin: false } } render() { const user = ( <div> <h1>用户界面</h1> <p>用户名: yangbuyiya</p> <p>密码: 666666</p> </div> ); const login = <Redirect to={'/login'}/> return this.state.isLogin ? user : login; } } export default User;
新建 Login.js:
import React from 'react'; class Login extends React.PureComponent { render() { return ( <div>Login</div> ) } } export default Login;
更改 App.js:
import React from 'react'; import Home from './components/Home' import About from './components/About' import User from './components/User'; import Login from './components/Login'; import Other from './components/Other'; import {BrowserRouter, Link, Route, Switch} from 'react-router-dom'; class App extends React.PureComponent { render() { return ( <div> <BrowserRouter> <Link to={'/home'}>Home</Link> <Link to={'/home/about'}>About</Link> <Link to={'/user'}>User</Link> <Switch> <Route exact path={'/home'} component={Home}/> <Route exact path={'/home/about'} component={About}/> <Route exact path={'/user'} component={User}/> <Route exact path={'/login'} component={Login}/> <Route component={Other}/> </Switch> </BrowserRouter> </div> ) } } export default App;
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
