React-路由器

安装: 先安装好react的应用程序然后npm react-router-dom

编程式导航

router.replace()

• replace模式是替换模式，会替换掉栈顶的路由
• 设置 replace 属性的话，当点击时，会调用 router.replace(), 导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。

router.push(location)

• 会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL,当点击时，这个方法会在内部调用，即点击等同于调用 router.push()

使用(版本6的写法):

• 创建根路径使用creatRoot()
• Routes代替Switch,element代替了component
• Navigate代替Redirect
• 跳转页面

  <link to="route里面的path地址">

React Router API

• BrowserRouter：使用了history和React Context 实现
• Route：用来定义一个访问路径与 React 组件之间的关系(访问时加载对应页面)

  <Route path="/定义的路径" element={<组件名 />} />

• Routes: 包裹一系列的 Route
• useLocation(): 获取当前页路径 URL 的信息
• 设置默认页路径(如 404 页): path=”*” 匹配所有路径
• Navigate标签『重定向』
  • replace 属性用于控制跳转模式(push 或 replace，默认是 push)
  • 页面判断:

    {sum === 1 
    	? <h4>sum的值为{sum}</h4>
    	: <Navigate to="/login" replace={true} />
    }

  • 重定向的意义: 判断用户是否登录过了,没有重定向回登录界面
• NavLink标签『路由高亮』
  • 作用: 跳转路径, 路径选中时会高亮
  • 不能直接指定高亮类名，需要通过函数返回。
  • 该函数传入一个对象，类似于 {isActive: true} 标识路由是否被激活。匹配成功会高亮，end 属性可移除该效果
• useRoutes()路由表:
  • React-创建路由统一管理配置
  • 引入到页面,使用NavLink标签
• Outlet标签『嵌套路由』
  • 设置二级路由链接时，可以是 to=”news”、to=”./news”，但不能是 to=”/news”
  • 在路由表中定义二级路由后,父组件在<NavLink 子路由链接/>标签下使用<Outlet>子路由出口</Outlet>

路由传参

传递 params 参数

• 注册路由时声明：

  <Route path="detail/:id/:name/:age" element={<Detail />} />

• 传递参数：

  <Link to={`detail/${item.id}/${item.name}/${item.age}`} />

• 使用 useParams() 接收 params 参数：

  const {id, name, age} = useParams()

传递 search 参数

• 传递参数：

  <Link to={'detail?id=${item.id}&name=${item.name}'} />

• 使用useSearchParams()接收参数：

  const [searchParams, setSearchParams] = useSearchParams()
  // 需要调用 get() 方法获取对应的参数值
  const id = searchParams.get('id')
  const name = searchParams.get('name')
  function change() {
  	setSearchParams('id=666&name=Lily&age=888')
  }

传递 state 参数

<Link 
	to="detail" 
	state={{ id: item.id, name: item.name, age: item.age }}>
	{item.name}
</Link>