React Router初识

相关网址：

​​官方地址​​

​​React Router 中文文档​​

​​React-Router 入门教程​​

​​简书：React Router教程​​

​​阮一峰教程​​

​​GitHub地址​​

React Router是便于React开发单页应用进行路由管理的一个第三方库。它主要有以下几个部分组成：
<BrowserRouter> 、 <HashRouter>： 定义路由器，它们是两种不同的路由，选择一种即可
<Route> 、<Switch>： 定义路由
<Link>、<NavLink>、<Redirect>： 使用路由，进行跳转

大致知道了React Router的一个组成成分，接下来看看如何应用到项目中。
在创建好的React项目中引入react-router-dom

npm install react-router-dom
or
yarn add react-router-dom

那么接下来该如何使用呢？可以参照官网的快速开始​​https://reactrouter.com/web/guides/quick-start​​ 接下来做两个实例快速了解下React Router的使用方式。

示例一：

这是一个常规的导航切换的功能，当然你也可以改变成左右两栏的布局。
github: ​​​https://github.com/956159241/ReactStudyDemo/tree/master/react-study-demo/src/router-demo1​​

import React from 'react';
import {BrowserRouter, Route, Link, Switch} from 'react-router-dom';

function Tab1() {
    return (<div>tab1</div>);
}

function Tab2() {
    return (<div>tab2</div>);
}

export default function RouterDemo1 () {
    return (
        <BrowserRouter>
            <div className='links'>
                <span style={{ margin:'5px'}}><Link to="/tab1">tab1</Link></span>
                <span style={{ margin:'5px'}}><Link to="/tab2">tab2</Link></span>
            </div>
            <Switch>
                <Route path='/tab1' component={Tab1} />
                <Route path='/tab2' component={Tab2} />
                <Route path='/' component={Tab1} />
            </Switch>
        </BrowserRouter>
    );

}

示例二：
很多时候我们需要设置二级导航，可能需要传递参数。
github: ​​​https://github.com/956159241/ReactStudyDemo/tree/master/react-study-demo/src/router-demo2​​

、

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch
} from "react-router-dom";



export default function RouterDemo2() {
  return (
    <Router>
      <div>
        <ul>
            <li><Link to="/">首页</Link></li>
            <li><Link to="/itemlist">项目列表</Link></li>
        </ul>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/itemlist" component={ItemList} />
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>首页</h2>
    </div>
  );
}

function ItemList() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>项目列表</h2>
      <ul>
        <li>
          <Link to={`${url}/item1`}>项目一</Link>
        </li>
        <li>
          <Link to={`${url}/item2`}>项目二</Link>
        </li>
        <li>
          <Link to={`${url}/item3`}>项目三</Link>
        </li>
      </ul>

      <Switch>
        <Route exact path={path}>
          <h3>选择一个项目</h3>
        </Route>
        <Route path={`${path}/:itemId`} component={Item} />
      </Switch>
    </div>
  );
}

function Item() {
  let { itemId } = useParams();
  return (
    <div>
      <h3>{itemId}</h3>
    </div>
  );
}