react-router-dom使用指南

1.安装react-router-dom

yarn add rect-router-dom

2.配置路由项（集中管理）

    在src目录下创建router目录，之后在router目录下创建index.tsx文件，注意文件后缀为tsx，写入代码如下。

import {RouteObject} from 'react-router-dom'
import MusicPage from '@/page/music/MusicPage'
import App from '@/App'
const config:RouteObject[] = [
    {
        path:"/",//路由路径
        element:<App/>,//与路由对应的组件
        children:[
            {
                index:true,//表示该组件为默认项
                element:<MusicPage/>
            }
        ],
    },
]
export default config

 3.配置路由模式

      路由模式共有两种，分别为 历史（BrowserRouter）和 哈希（HashRouter）。在使用时需要先引入RouterProvider组件。并在RouterProvider组件的router参数提供对应模式的方法。

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'

//哈希模式createHashRouter，历史模式createBrowserRouter
import {RouterProvider,createHashRouter} from "react-router-dom" 

import config from './router/index.tsx' //配置项

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
      <RouterProvider router={createHashRouter(config)}/>
  </React.StrictMode>,
)

4.配置子路由出口

 方法很简单，使用 Outlet 组件即可。

import "./App.css";
import { Outlet } from "react-router-dom";
function App() {
  return (
    <>
      <Outlet />
    </>
  );
}
export default App;

5.跳转路由

跳转路由的方式有以下几种

  1.link组件

import { Link } from 'react-router-dom';  
  
function App() {  
  return (  
    <div>  
      <Link to="/">主页</Link>  
    </div>  
  );  
}

     表现效果类似a标签，只不过用于路由跳转。

  2.NavLink组件

import { NavLink } from 'react-router-dom';  
  
function App() {  
  return (  
    <div>  
      <NavLink to="/">主页</NavLink>  
    </div>  
  );  
}

      类似于 Link 组件，但具有更多的激活状态属性。可以自定义被选中时应用的样式，通过 activeClassName 属性来设置被选中时被附加的 class，以及通过 activeStyle 属性来配置被选中时应用的样式。

   3.编程式导航-useNavigate

import { useNavigate} from 'react-router-dom';  
  
function MyComponent() {  
  const history = useNavigate();  
  
  const handleClick = () => {  
    history('/');  //填入路由地址即可
  };  
  
  return (  
    <button onClick={handleClick}>主页</button>  
  );  
}

   在代码逻辑中调用，创建对象后，传入路径参数即可。

   

---

附：react-router-dom 文档