【前端知识】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. 查看效果