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

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

一、Navigate的基本使用

新建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;

当路由均无匹配时，通过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;

二、路由嵌套和配置

构建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

利用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;