React-5路由

react5 - 路由6X

0. 核心组件

   • 路由模式 HashRouter BrowserRouter

-   路由规则 Routes和Route

    -   Route是路由配置的具体实现，它指定当路径匹配的时候渲染哪一个UI。

        ```
        function App() {
            return (
                <BrowserRouter>
                    {/* Routes路由输出组件 */}
                    <Routes>
                        {/* Route指定路径path与对应的react元素 */}
                        <Route path="/" element={<Navigate to="/login" />}></Route>
                        <Route path="/login" element={<Login />}></Route>
                        <Route path="/home" element={<Home />}>
                            <Route path="list" element={<Product/>}></Route>
                            <Route path="add" element={<Add/>}></Route>
                        </Route>
                    </Routes>
                </BrowserRouter>
            )
        }
        ​
        export default App
        ```

-   Navlink和Link

    Link指定链接到的路径名或位置、最终会渲染成a标签

    to属性,将会渲染成a标签的href属性

    Navlink 更特殊的link组件,比link多了个高亮显示,但需要定义一个action样式

 

- Navigate重定向

    ```
        import { Navigate } from 'react-router-dom'
        <Route path="/" element={<Navigate to="/login" />}></Route>
        <Route path="/login" element={<Login />}></Route>
    ```

0. 嵌套路由

配置嵌套路由规则， 使用Outlet组件输出， Outlet类似vue中router-view组件

0. 默认路由

```
// 默认路由
<Route path="a" element={<A/>}></Route>
<Route index element={<B/>}></Route>
```

```
//跳转时 路径不用写在当前默认组件 写在默认组件上一级才行
<Link to="a">A</Link> | <Link to="/news">B</Link>
```

0. 编程导航与传参

0. 全局配置路由404

   {/* 404错误处理 */}
   <Route path="*" element={<NotFond />}></Route>
   

1. 多组路由

\