重庆网站建设网站制作,wordpress换菜单样式,手机网站建设的重要性,沈阳营销网站建设一、路由安装
路由官网2021.11月初#xff0c;react-router 更新到 v6 版本。使用最广泛的 v5 版本的使用
npm i react-router-dom5.3.0二、路由使用
2.1 路由的简单使用 第一步 在根目录下 创建 views 文件夹 ,用于放置路由页面 films.js示例代码
export default functio…一、路由安装
路由官网2021.11月初react-router 更新到 v6 版本。使用最广泛的 v5 版本的使用
npm i react-router-dom5.3.0二、路由使用
2.1 路由的简单使用 第一步 在根目录下 创建 views 文件夹 ,用于放置路由页面 films.js示例代码
export default function Films() {return divfilms/div
} 第二步 在根目录下 创建router文件夹,并新建indexRouter.js文件 用来管理路由 indexRouter.js 页面示例代码
//1.引入 hashrouter
import { HashRouter, Route } from react-router-domimport { Component } from react//2.引入组件
import Films from ../views/films
import Cinemas from ../views/cinemas
import Center from ../views/center
export default class IndexRouter extends Component {render() {return (//3 使用HashRouterRoute path/films component{Films}/RouteRoute path/cinemas component{Cinemas}/RouteRoute path/center component{Center}/Route/HashRouter)}
}第三步 在App.js中 引入indexRouter App.js中示例代码
import IndexRouter from ./router/indexRouter
export default function App() {return (divIndexRouter/IndexRouter/div)
} 第四步 在入口文件index.js中渲染页面 index.js示例代码
import React from reactimport ReactDom from react-dom/clientimport App from ./App.jsReactDom.createRoot(document.querySelector(#root)).render(App/App)2.2 路由的重定向 第一步 引入Redirect import { HashRouter, Route, Redirect } from react-router-dom第二步 使用 (模糊匹配) 默认模糊匹配
export default class IndexRouter extends Component {render() {return (//3 使用HashRouterRoute path/films component{Films}/RouteRoute path/cinemas component{Cinemas}/RouteRoute path/center component{Center}/Route{/* 路由的重定向 模糊匹配*/}Redirect from/ to/films/Redirect/HashRouter)}
}2.3 路由Switch组件与404页面 Switch组件 包裹 Route 组件只会渲染第一个匹配的组件即使有多个路由都可以匹配成功 在实际开发时通常会用 Switch 组件包裹 Route 组件通过 Switch 组件非常容易的就能实现 404 页面功能 需引入
import { HashRouter, Route, Redirect, Switch } from react-router-dom//switch 包裹router标签SwitchRoute path/films component{Films}/Route....中间省略....{/* 404页面 */}Route component{NotFound}/Route/Switch404 页面实现 1.views目录下新建notFound.js 2.路由indexRouter.js中引入
import NotFound from ../views/notFound3.使用
HashRouter
SwitchRoute path/films component{Films}/RouteRoute path/cinemas component{Cinemas}/RouteRoute path/center component{Center}/Route{/* 路由重定向 精确匹配 exact 必须外边用Switch标签包裹 */}Redirect from/ to/films exact/Redirect{/* 404页面 */}Route component{NotFound}/Route
/Switch2.4 路由嵌套
必须一级路由是模糊匹配!!!1.新建二级路由页面,并在一级路由页面引入2.一级路由页面配置路由信息一级路由示例代码
//引入switch route
import { Switch, Route, Redirect } from react-router-dom//引入
import One from ./films/one
import Two from ./films/two
export default function Films() {return (divfilmsSwitchRoute path/films/one component{One}/RouteRoute path/films/two component{Two}/Route{/* 重定向 */}Redirect from/films to/films/one/Redirect/Switch/div)
}2.5 声明式导航与编程式导航
2.5.1 声明式导航 通过 a链接 进行跳转 //需加 #a href#/center我的/a通过NavLink 进行跳转 //1.引入
import { NavLink } from react-router-dom....NavLink to/center我的/NavLink2.5.2 编程式导航 核心代码 import axios from axios
import { useState, useEffect } from react
import { useHistory } from react-router-dom
export default function Tabbar(props) {console.log(打印props, props)let history useHistory() //将useHistory()钩子赋值给history方便使用const [list, setList] useState([])useEffect(() {axios.get(http://localhost:3000/data.json).then((res) {console.log(接口请求成功, res)setList(res.data.tabs)}).catch((err) {console.log(接口请求失败, err)})}, [])const toDetails (id) {console.log(编程式导航, id)// 原生js 跳转// window.location.href http://localhost:3000/#/cinemashistory.push(/detail/${id})}return (h1编程式导航/h1ul{list.map((item, index) (li key{item.id} onClick{() toDetails(item.id)}{item.name}/li))}/ul/)
}
2.6 路由传参
2.6.1 动态路由传参 核心代码 传递参数页面
import axios from axios
import { useState, useEffect } from react
import { NavLink, useHistory } from react-router-dom
export default function Tabbar(props) {console.log(打印props, props)let history useHistory() //将useHistory()钩子赋值给history方便使用const [list, setList] useState([])useEffect(() {axios.get(http://localhost:3000/data.json).then((res) {console.log(接口请求成功, res)setList(res.data.tabs)}).catch((err) {console.log(接口请求失败, err)})}, [])const toDetails (id) {//1.history.push跳转传参history.push(/detail/${id})}return (ul{list.map((item, index) (li key{item.id} onClick{() toDetails(item.id)}{item.name}/li))}/ul/)
}
路由页面
{/* 详情 :myid接参占位 */}
{/* history.push跳转传参 */}
Route path/detail/:myid component{Detail}/Route
接参页面
export default function Detail(props) {// history.push跳转传参console.log(详情, props.match.params.myid)return div详情页面/div
}
2.6.2 state传参
传递参数页面
import axios from axios
import { useState, useEffect } from react
import { useHistory } from react-router-dom
export default function Tabbar(props) {console.log(打印props, props)let history useHistory() //将useHistory()钩子赋值给history方便使用const [list, setList] useState([])useEffect(() {axios.get(http://localhost:3000/data.json).then((res) {console.log(接口请求成功, res)setList(res.data.tabs)}).catch((err) {console.log(接口请求失败, err)})}, [])const toDetails (id) {//state传参history.push({ pathname: /detail, state: { myid: id } })}return (ul{list.map((item, index) (li key{item.id} onClick{() toDetails(item.id)}{item.name}/li))}/ul/)
}
路由配置
Route path/detail component{Detail}/Route接参页面
export default function Detail(props) {//第二种传参console.log(第二种传参, props.location.state.myid)return div详情页面/div2.7 路由拦截
需求:没有token(未登录) 跳转到登录页面1.定义函数 用于返回本地是否有token isLogin() {console.log(是否登录, localStorage.getItem(token))return localStorage.getItem(token)}2.创建登录页 并路由引入配置登录页 {/* 登录页面 */}Login path/login component{Login}/Login3.在需要判断的页面路由上 动态判断
//是否登录 登录跳转至该页面 未登录 重定向登录页面
Route path/center render{() this.isLogin() ? Center / : Redirect to/login/Redirect}/Route2.8 路由模式
1.哈希模式 路径带# HashRouter2.BrowserRouter 路径没有# 真正朝后端发请求
//引入BrowserRouter
import {BrowserRouter as Router,
} from react-router-dom...
//使用
RouterSwitch...路由.../Switch
/Router
