前端知识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;
-
查看效果
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfhafj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01