react路由
前言
提示
路由其实可以理解为是一个映射关系,即路径到组件或者函数的对应关系
提示:以下是本篇文章正文内容,下面案例可供参考
一、react路由安装?
npm i react-router-dom -S
二、路由配置
1.创建一个router/index.js 文件夹
// 创建路由
const element = useRoutes(baseRoutes)
//返回路由的内容
return ( <>{element}</> );
2.App.js包装
1.
//导入hash路由 其中as是起个别名
import {HashRouter as Router,NavLink} from 'react-router-dom'
function App() {
return ( <Router>
`带参数的路由配置 在router/index.js里面的path路径加上/:id 相当于声明了一个变量 然后在跳转的时候带上参数就可以把参数送过去`
<NavLink style={{fontSize:"200px",textAlign:"center"}} to={{pathname:'/produce/我是一只鸡'}}>🐲</NavLink>
<NavLink style={{fontSize:"200px",textAlign:"center"}} to={{pathname:'/produce/我是一坨猪'}}>🐳</NavLink>
<NavLink style={{fontSize:"200px",textAlign:"center"}} to="/admin/">🐶</NavLink>
<RouterView></RouterView>
</Router>);
}
3.组件
3.1、哈希路由
HashRouter 哈希路由
所有的路由组件和方法必须包裹在这个路由里面
3.2、导航链接 NavLink(选中多个action)
to="/about"
to={{pathname:"/about"}}
3.3、link 导航链接
两者都是实现路由的跳转.,两者都自带高亮,但是
1.点击<Link>时,url会更新,组件会被重新渲染,但是页面不会重新加载...使用to链接组件时,它的值既可是字符串,也可以是location对象(包含 pathname、search、hash、与state属性)如果其值为字符串,将会被转换为location对象
2.点击<navlink>时,会在匹配上当前的url的时候给已经渲染的元素添加参数.
4、use方法
4.1、useRoutes 创建路由
先创建一个router/index.js文件
//useRouter根据路由配置 创建路由
import { useRoutes } from "react-router-dom";
4.2、useParams 获取路由参数
直接在pathname的路径加上需要传入的参数 记得在path里面配置加上一个带参数的变量
//导入hash路由
import {HashRouter as Router,NavLink} from 'react-router-dom'
//导入创建好的路由
import RouterView from './router'
//app
function App() {
return ( <Router>
<NavLink style={{fontSize:"200px",textAlign:"center"}} to="" >🐖</NavLink>
<NavLink style={{fontSize:"200px",textAlign:"center"}} to={{pathname:'/about'}}>🐔</NavLink>
<NavLink style={{fontSize:"200px",textAlign:"center"}} to={{pathname:'/produce/我是一只鸡'}}>🐲</NavLink>
<NavLink style={{fontSize:"200px",textAlign:"center"}} to={{pathname:'/produce/我是一坨猪'}}>🐳</NavLink>
<NavLink style={{fontSize:"200px",textAlign:"center"}} to="/admin/">🐶</NavLink>
<RouterView></RouterView>
</Router>);
}
export default App;