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;