react 路由跳转（编程式导航） |
您所在的位置：网站首页 › react路由exact › react 路由跳转（编程式导航） |
react 路由跳转（编程式导航）
| 一、项目需求
准备实现一个简易的编程式导航项目，需求如下 一级路由：Login 、Layout 二级路由：Layout 下有 Avatar、Detail、User 实现登录、退出跳转功能 实现传参获参：Avatar、Detail、User 二、项目初始化准备 1.创建启动下载 npx create-react-app react-router cd react-router yarn start 或 npm start 或 npm run start yarn add [email protected]src/views/Page/Avatar.js // 函数组件 const Avatar = () => { return 我是 Avatar } export default Avatarsrc/views/Page/Detail.js // 类组件 import React from 'react' class Detail extends React.Component { render() { return 我是 Detail } } export default Detailsrc/views/Page/User.js // 类组件 import React from 'react' class User extends React.Component { render() { return 我是 User } } export default User 4.补充导航点击样式 index.css /* 点击出现小手 */ li { width: 100px; cursor: pointer; } /* 点击导航高亮 */ li:hover { background-color: pink; } 三、实现编程式导航跳转 1.App.js import React from 'react' // 导入路由 [email protected] import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom' // 导入登录页 import Login from './views/Login' // 导入首页 import Layout from './views/Layout' // ◆BrowserRouter 只能出现一次 class App extends React.Component { render() { return {/* 重定向 */} } } export default App 2.src/views/Login.js函数组件实现编程式导航跳转 import React from 'react' import { Route } from 'react-router-dom' import Layout from './Layout' const Login = (props) => { // 1.登录 去 Layout const goLayoutHandler = () => { props.history.push('/layout') } return 这是登录页! Login 登录 }; export default Login 3.src/views/Layout.js类组件实现编程式导航跳转 import React from 'react' import { Route, Redirect } from 'react-router-dom' // 导入 子路由 import Avatar from './Page/Avatar' import Detail from './Page/Detail' import User from './Page/User' import '../index.css' class Layout extends React.Component { // ◆1.退出登录 logOutHandler = () => { this.props.history.push('/login') } // ◆2.去 Avatar goAvatatHandler = () => { this.props.history.push('/layout/avatar') } // ◆3.去 Detail goDetailHandler = () => { this.props.history.push('/layout/detail') } // ◆4.去 User goUserHandler = () => { this.props.history.push('/layout/user') } render() { return 这是首页! Layout 退出 我是 Avatar 我是 Detail 我是 User } } export default Layout 四、编程式导航传参与获参 第一种：search 1.Layout.js 传参 // 省略其他。。。 // ◆2.去 Avatar goAvatatHandler = () => { this.props.history.push('/layout/avatar?name=Lucy&age=18') } 2.Avatar.js 获参 const Avatar = (props) => { console.log(props,'Avatar') console.log(props.location.search)//?name=Lucy&age=18 // ◆法1：浏览器内置的 new URLSearchParams() 方法，获取我们想要的参数 const name = new URLSearchParams(props.location.search).get('name') const age = new URLSearchParams(props.location.search).get('age') console.log(name)// Lucy console.log(age)// 18 // ◆法2：slice()方法，可用于字符串和数组(我还想变成对象的格式) // 1.把问号去掉 const query = props.location.search.slice(1) console.log(query, 'query')// name=Lucy&age=18 // 2.切割成数组 const arr = query.split('&') console.log(arr, 'res')// 'name=Lucy', 'age=18'] 'res' // 3.再循环切割获取对象 let obj = {} arr.forEach(item => { const arr2 = item.split(['=']) console.log(arr2, 'arr2')// ['name','Lucy'] ['age','18'] obj[arr2[0]] = arr2[1] }) console.log(obj, 'obj')// {name: 'Lucy', age: '18'} // ◆法3：把 法2 封装成函数(也可以单独抽离成一个 js 文件) function paramsQuery(url) { // 1.把问号去掉 const query = url.slice(1) // 2.切割成数组 const arr = query.split('&') // 3.再循环切割获取对象 let newObj = {} arr.forEach(item => { const arr2 = item.split(['=']) newObj[arr2[0]] = arr2[1] }) // const {name,age}=obj // 4.返回对象 return newObj } // 5.调用获取结果 const res = paramsQuery(props.location.search) console.log(res, '123') // ◆ 页面使用 return 我是 Avatar 我的名字是{name}，我的年龄是：{age} 我的名字是{obj.name}，我的年龄是：{obj.age} 我的名字是{res.name}，我的年龄是：{res.age} } export default Avatar 3.页面效果 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |