React-Route-Dom V6 简介！！！

自React 17 更新以来，可慢慢的发现从React-Route-Dom，React-Redux，甚至是ANTD都出现了与以往新版的写法，这种改变，无疑是React v16.8 之后Hooks的引入带来的，颇有一点“弃旧图新”的感觉。但是不管开发者是否喜欢，函数编程思想总归是好的，其中的益处比如让我们彻底告别了冗杂的 类组件，代码更加的清晰、明了。所以不管是否喜欢，若想继续从事React的开发，像之前一样按部就班的学习下去是唯一的选择。

React-Route-Dom V6 相比较V5出现了较大的更新，并且很多API已经不再使用，若不能明确其中的差异，在布置路由的时候，一定会让你感觉莫名其妙，今天我们就聊聊其中的API的更改和其新式的 路由 布置。

安装：

    npm install react-router-dom --save
    // 自动安装react-router依赖；

src > router > index.tsx

import Login from '../pages/Login';
import HomePage from '../pages/HomePage';

import { Route, Routes, Link, RouteProps } from 'react-router-dom';

const routes: RouteProps[] = [
    { path: '', element: <Login /> },
    { path: '/HomePage', element: <HomePage /> },
];

const Router = () => {

    // *** 此处有为注意的是 V5 之前用的是 component 来渲染对应的组件，如：
    // <Route path={item.path} component={item.component}/>
    return (
        <Routes>
            {
                routes.map((item) => {
                    return <Route path={item.path} element={item.element} key={item.path} />
                });
            };
        </Routes>
    );
};
export default Router;

// 这是一个简单的路由的搭建，可以看出 react-router-dom 依旧提供了 Routes、Route，而NavLink、Link api 也是依旧存在的。*** v6 版本已移除 ### withRouter 、Switch，改用 Routes；

src > index.tsx

    import { BrowserRouter } from "react-router-dom";
    import ReactDOM from 'react-dom/client';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import { store } from './redux/store';
    import { Provider } from "react-redux";
    import { persistStore } from 'redux-persist'
    import {persistor} from './redux/store';
    import {PersistGate} from 'redux-persist/lib/integration/react';

    const root = ReactDOM.createRoot(
      document.getElementById('root') as HTMLElement
    );
    root.render(
    // 需使用 BrowserRouter 包裹，若换成 HashRouter 会出现 bug；
      <BrowserRouter>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <App />
          </PersistGate>
        </Provider>
      </BrowserRouter>
    );

    reportWebVitals();

关于Browser & HashRouter 的区别； BrowserRouter 使用的是 H5 的 History Api，而 HashRouter 根据的是 Hash 哈希值；并且浏览器的表现形式也不同。*** BrowserRouter刷新后的参数依旧存在，因为对应的状态是保存在History对象中，而后者刷新数据后会丢失。

NavLink & Link 的使用：

    import { NavLink } from 'react-router-dom';
    
    ......
    <NavLink to={item1.key}> {item1.title}</NavLink>
    // Link用法与之相同，区别在于少了一个类名；
    ......

路由跳转： V6 最重要的的更新莫过于路由的跳转了，较之前现在的写法引入了 useNavigation api，传参更方便，并且刷新后数据不会丢失，传入参数的大小也基本能满足一些业务的使用。

    ......
    import { useNavigate } from "react-router-dom";
    ...
    
    export default function App () {
        const navigate = useNavigate();
        
        const handleClick = () => {
            navigate('/InfoReport', { replace: false, state: { type: '', id: '' } })
        }
    
        return (
            ......
            <button onclick={handleClick}></button>
        )
    }