react-router-dom v6学习一下

学习目录

学习一下react-router吧，记录学习的api。持续更新～

本例使用react18，react-dom18

安装

yarn add react-router-dom@6
npm install react-router-dom@6

使用

HashRouter和BrowserRouter

HashRouter创建一个hash路由，BrowserRouter创建一个基于historyAPI的路由

Routes和Route的使用

这两个组件相辅相成，在配置页面的时候缺一不可，Routes可以看成switch，Route可以看成case。

• element可以用来传递页面组件
• path 传递匹配的url ，'*为通配符'当无法匹配到路由时匹配该组件

下面代码传递了app和Teams两个组件 分别对应的路由url为/和/teams

<Routes>
    <Route path='/' element={<App></App>}></Route>
    <Route path='/teams' element={<Teams></Teams>}></Route>
    <Route
     path='*'
     element={
     <main style={{ padding: '1rem' }}>
     		<p>空白通配页面</p>
     </main>
     }
     ></Route>
</Routes>

嵌套路由

v6版本可以直接使用Route组件进行嵌套

• index参数 匹配父级路由outlet或者子路由未匹配时
• :id 在本例中创建teams/123 可以使用useparams获取id 值为123

<Route path='teams' element={<Teams></Teams>}>
	<Route 
        index 
        element={
		<main>
		<p>我是index</p>
		</main>
		}
	></Route>
	<Route path=':id' element={<Team></Team>}></Route>
</Route>

Outlet

类似vuejs里的slot，当使用嵌套路由的时候，这个组件负责展示子路由

import React from 'react';
import { Link, Outlet } from 'react-router-dom';
export default function App() {
  return (
    <div>
      <h1>你好router-v6</h1>
      <nav>
        <div>
          <Link to='/home'>home</Link>
        </div>
        <div>
          <Link to='/teams'>team</Link>
        </div>
      </nav>
      <Outlet></Outlet>
    </div>
  );
}

Link和NavLink

Link和NavLink类似a标签，但是NavLink主要用于展示当前激活的路由

<NavLink
   to={`/teams`}
   style={({ isActive }) => {
   return {
   display: 'block',
   margin: '1rem 0',
   color: isActive ? 'red' : ''
  };
}}
//-----
<Link to={`/teams`}>

</Link>

完整实例

1. 首先通过react-dom中client提供的createRoot创建一个根容器
2. 使用根容器的render方法创建一个视图
3. 通过HashRouter创建一个hash路由

import {Routes,Route,HashRouter} from "react-router-dom"
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import Teams from './page/Teams';
import Team from './page/Teams/Team';
const root = createRoot(document.getElementById("root"))
root.render(  <HashRouter>
    <Routes>
      <Route path='/' element={<App></App>}>
        <Route path='home' element={<Home></Home>}></Route>
        <Route path='teams' element={<Teams></Teams>}>
          <Route
            index
            element={
              <main>
                <p>我是index</p>
              </main>
            }
          ></Route>
          <Route path=':id' element={<Team></Team>}></Route>
        </Route>
        <Route
          path='*'
          element={
            <main style={{ padding: '1rem' }}>
              <p>空白通配页面</p>
            </main>
          }
        ></Route>
      </Route>
    </Routes>
  </HashRouter>)

hooks相关

useSearchParams

如果url是这样的 localhost:9000/#/home?test=12

const [searchParams,setSearchParams] = useSearchParams()
// 可以通过all或者get或者getAll获取
searchParams.get('test') // 12
searchParams.getAll('test') // [12]

useParams

如果url是这样的 localhost:9000/#/home/1234

路由配置是<Route path=":id" element={

} />

const params = useParams()

params.id // '1234'

useLocation

如果url是这样的 localhost:9000/#/home/1234?test=haha

const location = useLocation()
/*
{
hash: ""
key: "default"
pathname: "/home/1234"
search: "?test=haha"
state: null
}
*/

useNavigate

可以实现路由跳转

function() {
  const navigate = useNavigate()
  return <button onClick={() => {
      navigate('/home')
    }}>跳转home</button>
	
}

结语

持续更新，慢慢学习