React 基礎(chǔ)鞏固(四十)——Navigate導(dǎo)航

一、Navigate的基本使用

1. 新建Login頁面，在Login中引入Navigate，實現(xiàn)點擊登陸按鈕跳轉(zhuǎn)至/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. 當(dāng)路由均無匹配時，通過Navigate跳轉(zhuǎn)至NotFound界面，其中*為通配符：

   構(gòu)建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">關(guān)于</NavLink>
               <NavLink to="/login">登陸</NavLink>
             </div>
             <hr />
           </div>
           <div className="content">
             {/* 映射關(guān)系： 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. 構(gòu)建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>榜單數(shù)據(jù)</h2>
           <ul>
               <li>歌曲數(shù)據(jù)1</li>
               <li>歌曲數(shù)據(jù)2</li>
               <li>歌曲數(shù)據(jù)3</li>
               <li>歌曲數(shù)據(jù)4</li>
               <li>歌曲數(shù)據(jù)5</li>
           </ul>
         </div>
       )
     }
   }
   
   export default HomeRanking
   
   

2. 利用Route嵌套子路由，實現(xiàn)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">關(guān)于</NavLink>
               <NavLink to="/login">登陸</NavLink>
             </div>
             <hr />
           </div>
           <div className="content">
             {/* 映射關(guān)系： path => Component */}
   
             <Routes>
               <Route path="/" element={<Navigate to="/home" />} />
               <Route path="/home" element={<Home />} >
                 // 當(dāng)一開始進(jìn)入/home時，Home中的子頁面默認(rèn)展示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. 查看效果

   

   文章來源地址http://www.zghlxwxcb.cn/news/detail-622366.html

到了這里，關(guān)于【前端知識】React 基礎(chǔ)鞏固(四十)——Navigate導(dǎo)航的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！