跳到主要内容

基础

React Router​

RR 相关的有三个包发布到 npm 上

1.react-router: 路由核心库，提供组件和钩子 2.react-router-dom: react-router 的超集，添加了一些专门用于 DOM 的组件 3.react-router-native: react-router 的超集，添加一些专门用于 ReactNaive 的 API,如 NativeRouter

rr6 的新变化​

  • <Switch/>替换成<Routes/>
  • 语法的变化：component={About}变为element={<About/>}
  • 新增多个 hook
  • 明确推荐函数式组件

Route 与 Routes​

当 URL 发生变化时，Routes 都会查看所有子 Route 元素，并以最佳匹配呈现组件

<Routes>
  <Route path="/login" element={<Login />}></Route>
  // 嵌套路由
  <Route path="home" element={<Login />}>
    // /home/test
    <Route path="test" element={<Test />}></Route>
  </Route>
</Routes>

与 link 类似，但是用于 navigator，可以实现导航的高亮


<NavLink
  to="login"
  className=(({isActive})=>{
    return isActive?'a':'b'
  })
>aaa</NavLink>

// 默认情况下，子组件匹配父组件高亮
// 加上end,即使子组件匹配父组件也不会高亮，适用于Home
<NavLink
  end
  to="login"
  className=(({isActive})=>{
    return isActive?'a':'b'
  })
>aaa</NavLink>

useNavigate()​

返回一个函数实现编程式导航

const navigate = useNavigate();
navigate("/login", {
  replace: false,
  state: { a: 1, b: 2 },
});

navigate(-1);

useSearchParams()​

用于读取和修改当前位置的 URL 中的查询字符串 而且和输入栏的字符串双向绑定

const [search, setSearch] = useSearchParams();
const id = search.get("id");
const title = search.get("title");

setSearch("id=008&title=哈哈");

useLocation()​

获取当前 location 对象

{
  hash:"",
  key:"wewwf",
  pathname:"/login",
  search: "?name=zs&age=18"
  state: {a:1,b:2}
}

useParams()​

返回 params 参数

useMatch()​

返回当前匹配信息

{
  params: {x:'1',y:'10'}
  pathname: "/login/1/2"
  pathnameBase: "/login/1/2"
  pattern:{
    path: '/login/:x/:y'
    caseSensitive:false,
    end:false
  }
}