【前端知识】React 基础巩固(四十)——Navigate导航

React 基础巩固(四十)——Navigate导航

一、Navigate的基本使用

1. 新建Login页面，在Login中引入Navigate，实现点击登陆按钮跳转至/home路径下：

   import React, { PureComponent } from "react";
   import { Navigate } from "react-router-dom";export class Login extends PureComponent {constructor(props) {super(props);this.state = {isLogin: false,};}login() {this.setState({isLogin: true,});}render() {const { isLogin } = this.state;return (<div><h1>login page</h1>{!isLogin ? (<button onClick={(e) => this.login()}>登陆</button>) : (<Navigate to="/home" />)}</div>);}
   }export default Login;

2. 当路由均无匹配时，通过Navigate跳转至NotFound界面，其中*为通配符：

   构建NotFound.jsx

   import React, { PureComponent } from 'react'export class NotFound extends PureComponent {render() {return (<div><h1>Not Found Page</h1><p>路径不存在，请检测之后再操作。</p></div>)}
   }export default NotFound

   在App.jsx中配置NotFound：

   import React, { PureComponent } from "react";
   import { Route, Routes, NavLink, Navigate } from "react-router-dom";
   import "./style.css";
   import Home from "./pages/Home";
   import About from "./pages/About";
   import Login from "./pages/Login";
   import NotFound from "./pages/NotFound";export class App extends PureComponent {render() {return (<div className="app"><div className="header"><span>header</span><div className="nav"><NavLink to="/home">首页</NavLink><NavLink to="/about">关于</NavLink><NavLink to="/login">登陆</NavLink></div><hr /></div><div className="content">{/* 映射关系： path => Component */}<Routes><Route path="/" element={<Navigate to="/home" />} /><Route path="/home" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/login" element={<Login />} /><Route path="*" element={<NotFound />} /></Routes></div><div className="footer">Footer</div></div>);}
   }export default App;

二、路由嵌套和配置

1. 构建Home的子路由页面：

   HomeRecommend.jsx

   import React, { PureComponent } from 'react'export class HomeRecommend extends PureComponent {render() {return (<div><h2>Banner</h2><h2>歌单列表</h2><ul><li>歌单1</li><li>歌单2</li><li>歌单3</li></ul></div>)}
   }export default HomeRecommend

   HomeRanking.jsx

   import React, { PureComponent } from 'react'export class HomeRanking extends PureComponent {render() {return (<div><h2>Ranking Nav</h2><h2>榜单数据</h2><ul><li>歌曲数据1</li><li>歌曲数据2</li><li>歌曲数据3</li><li>歌曲数据4</li><li>歌曲数据5</li></ul></div>)}
   }export default HomeRanking

2. 利用Route嵌套子路由，实现Home页面下的子路由切换：

   import React, { PureComponent } from "react";
   import { Route, Routes, NavLink, Navigate } from "react-router-dom";
   import "./style.css";
   import Home from "./pages/Home";
   import About from "./pages/About";
   import Login from "./pages/Login";
   import NotFound from "./pages/NotFound";
   import HomeRecommend from "./pages/HomeRecommend";
   import HomeRanking from "./pages/HomeRanking";export class App extends PureComponent {render() {return (<div className="app"><div className="header"><span>header</span><div className="nav"><NavLink to="/home">首页</NavLink><NavLink to="/about">关于</NavLink><NavLink to="/login">登陆</NavLink></div><hr /></div><div className="content">{/* 映射关系： path => Component */}<Routes><Route path="/" element={<Navigate to="/home" />} /><Route path="/home" element={<Home />} >// 当一开始进入/home时，Home中的子页面默认展示recommend页面<Route path="/home" element={ <Navigate to="/home/recommend" />}/><Route path="/home/recommend" element={ <HomeRecommend/>}/><Route path="/home/ranking" element={ <HomeRanking/>}/></Route><Route path="/about" element={<About />} /><Route path="/login" element={<Login />} /><Route path="*" element={<NotFound />} /></Routes></div><div className="footer">Footer</div></div>);}
   }export default App;

3. 查看效果