浅说明react中如何使用路由React-router-dom

在项目中下载路由

npm install react-router-dom --save

在项目中如何使用路由

1. 引入使用到的组件
2. 注册路由

//引入需要用的到的组件
import { BrowserRouter,Route,Routes,Outlet,Link,NavLink } from 'react-router-dom';

//这里要用BrowserRouter路由组件包裹所有需要用到路由的组件
function App = ()=>{
    return (
        <BrowserRouter>
{/*这里需要用Routes组件将所有注册的路由都包裹住才可以*/}
            <Routes>
{/*这个是一级路由，用Route组件，给它path和element属性赋值*/}
{/*path属性就是组件的路由地址，element属性就是路由跳转的组件*/}
            <Route path="/login" element={<Login />}>
{/*这种是二级路由，包裹在以及路由中，并且path属性不加上‘/’*/}
                {/*想要某个组件默认展示，就给他index属性---前提是不配置path，index为true默认展示，为false不展示*/}
                {/*<Route index={false} element={<Home/>}/>*/}
                {/*还有一种方式就是将path属性给空字符串，就默认展示了*/}
                <Route path="" element={<Home/>}/>
                <Route path="about" element={<About />}/>
            </Route>
        </Routes>
        </BrowserRouter>
    )
}

还有Link组件和NavLink组件

这两个都是用来做路由跳转的

<Link to="/login/about">去about页</Link>
<NavLink to="login/about">去about页</NavLink>

to属性：添加跳转路由的路径

补充HashRouter

HashRouter和BrowserRouter用法不同点在于，在做路由跳转的时候HashRouter需要在路径前面拼接#，否则它是不会跳转的

重定向Navigate

当跳转至一个路由组件的时候想要重定向到另一个组件就可以使用这个组件

使用方式和Route一样，只需要将element属性定义为Navigate组件

Navigate组件中的to属性需要定义到重定向到的组件的路由地址

<Route path="/home" element={<Navigate to="/about" />} />