React项目中react-router的使用

路由，描述了 URL 与 UI之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。

react-router的使用

安装

需要安装react-router及其依赖：

npm install react-router-dom
npm install --dev @types/react-router-dom

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

路由的两种常用的模式：hash模式和history模式。在react-router中对应的组件分别为HashRouter和BrowserRouter。

HashRouter，通过window.addEventListener('hashChange',callback)监听hash值的变化，并传递给其嵌套的组件。然后通过context将location数据往后代组件传递。
BrowserRouter通过props传进来的path与context传进来的pathname进行匹配，然后决定是否执行渲染组件。
如果有后台服务器并配置所有路径到首页，才能使用history模式，即BrowserRouter组件。否则只能用hash模式。

用法

在src/App.tsx内：

import React from 'react';
import {HashRouter as Router, Switch, Route, Redirect} from 'react-router-dom';

import Tags from './views/Tags'
import Money from './views/Money'
import Statistics from './views/Statistic'
import NoMatch from './views/NoMatch'
import styled from 'styled-components'
import {Tag} from './views/Tag'


function App() {
  return (
    <Router>
      <Switch>
        <Route path="/tags" exact>
          <Tags/>
        </Route>
        <Route path="/tags/:id" exact={true}>
          <Tag/>
        </Route>
        <Route path="/money" exact>
          <Money/>
        </Route>
        <Route path="/statistics" exact>
          <Statistics/>
        </Route>
        <Redirect exact from="/" to="/money"/>
        <Route path="*">
          <NoMatch/>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在Route path="/tags" exact加上exact是精准匹配，只有当路径完全相同是才会进入此页面。

使用Navlink

通过NavLink可以给Link添加类名，从而实现修改样式。使用前也需要引入。示例：

import styled from 'styled-components'
import {NavLink} from 'react-router-dom'
import React from 'react'
import Icon from './Icon'


const Nav=()=>{
  return (
    <NavWrapper>
      <ul>
        <li>
          <NavLink to="/tags" exact activeClassName="selected">
            <Icon name='tag'/>
            标签页
          </NavLink>
        </li>
        <li>
          <NavLink to="/money" activeClassName="selected">
            <Icon name='money2'/>
            记账页
          </NavLink>
        </li>
        <li>
          <NavLink to="/statistics" activeClassName="selected">
            <Icon name='chart'/>
            统计页
          </NavLink>
        </li>
      </ul>
    </NavWrapper>
  )
}

export default Nav;

activeClassName:string

一般都用selected，当被激活时，显示类名为selected 的css样式。