React项目中的react-router

react-router 的使用

在使用create-react-app做项目时，react-router是必不可少的。但是网上大部分教程都是基于v5版本。本文旨在探索react-router的v6版本使用方法，主要参考文献是其官方文档。

安装

终端运行

$ npm install react-router-dom@6

入口文件--设置路由的模式

路由，描述了 URL 与 UI之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。
两种常用的模式，hash模式和history模式。在react-router中对应的组件分别为HashRouter和BrowserRouter。
HashRouter，通过window.addEventListener('hashChange',callback)监听hash值的变化，并传递给其嵌套的组件。然后通过context将location数据往后代组件传递。
BrowserRouter通过props传进来的path与context传进来的pathname进行匹配，然后决定是否执行渲染组件。
适用场景
如果有后台服务器并配置所有路径到首页，才能使用history模式，即BrowserRouter组件。

它们的使用方法如下。
在入口文件。src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from "react-router-dom";

ReactDOM.render(
    <HashRouter>
        <App />
    </HashRouter>, document.getElementById('root')
);

App组件中的声明

在App组件中列举项目中需要用到的UI以及它们对应的URL。这里使用treeShaking的思想将组件抽离出来。
设置default路由
<Route path="/" element={<Navigate to="/money"/>}/>即可实现进入根目录即为money组件渲染的页面。灵活使用参数path以及to可以自定义更多子页面的default路由。

import React from 'react';
import {Routes, Route, Navigate} from "react-router-dom";
import Money from "views/money";
import Tags from "views/tag";
import Statistics from "views/statistics";
import Nomatch from "views/nomatch";
import {TagsInside} from 'views/TagsInside'

function App() {
    return (
            <Routes>
                <Route path="tags" element={<Tags/>}/>
                <Route path="tags/:id" element={<TagsInside/>}/>
                <Route path="money" element={<Money/>}/>
                <Route path="statistics" element={<Statistics/>}/>
                <Route path="/" element={<Navigate to="/money"/>}/>
                <Route path='*' element={<Nomatch/>}/>
            </Routes>
    );
}

export default App;

使用

使用Navlink,它的属性如下：

import {NavLink} from "react-router-dom";
import React from "react";
import Icon from "./icon";


const Nav:React.FC=()=>{
    return(
           <NavLink className={(navData) => navData.isActive ? 'active' : ""} to="/tags">
                <Icon name='tag'/>
                <div>Tags</div>
           </NavLink>
    );
} 

export {Nav}