React路由6.3+hooks配置

提示: 此教程使用react-router 6.3 版本实现
1, 下载react的路由模块(默认最新6.3)
    npm install react-router-dom --save
2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件  
    (注: 哈希模式用HashRouter 历史模式用BrowserRouter)
    import { HashRouter } from 'react-router-dom'
    ReactDOM.render(
          <HashRouter >
            <App />
        </HashRouter >
    );
3, 创建路由文件src/router/index.js,  并从路由模块中导入工具组件Route 
    import { Routes, Route } from "react-router-dom";
4, 创建路由组件,配置路由, 并导出
    export default function MyRouter(){
        return(
            <Routes >
                <Route path="/" element={<Home/>} />
                <Route path="/login" element={<Login/>} />
                {/* router6的路由重定向写法 */}
                <Route path="/abc" element={<Navigate to="/login" replace/>} />
            </Routes >
        )
    }
5, 在app.js中导入路由组件
    import RouterView from './router/index';
6, 在根组件app模板中添加路由组件,即路由出口
    <RouterView></RouterView>
7, 在需要跳转的页面, 从路由模块导入工具组件 Link
    import {Link} from 'react-router-dom'
8, 使用Link组件执行路由跳转
    <Link to="/">首页/Link>

注意: 使用router6.0实现的路由跳转, 不会向组件中传入路由信息, 可以在组件中从路由模块导出useLocation和useNavigate函数以实现路由相关功能