React 路由

基于 React Router 5.x

安装路由

1. 安装：npm install react-router-dom --save-dev
2. 安装 TypeScript 的声明文件：npm install @types/react-router-dom --save-dev

注：

• react-router-dom 比 react-router 多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。
• react-router-dom 依赖 react-router，所以我们使用npm安装依赖的时候，不用再显式安装 react-router。

---

使用路由

1. BrowserRouter：路由导航与原生浏览器操作行为一致
2. Route：路由的路径解析原理与原生浏览器一致，可以自动识别url路径
3. Switch：路径的切换以页面为单位，不要页面堆叠

最简单的路由例子：

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import { Home } from './pages'

function App() {
    return (
        <div>
            <BrowserRouter>
                {/* Switch 解决页面叠加问题，每次只渲染一个路由页面 */}
                <Switch>
                    <Route path="/" component={Home} exact />
                    <Route path="/signIn" render={(() => <h1>登录页面</h1>)} />
                    <Route render={(() => <h1>404 not found 页面</h1>)} />
                </Switch>
            </BrowserRouter>
        </div >
    );
}

export default App;

---

路由传参

使用分段路由Segments:http://localhost:3000/detail/11121314

1. App.tsx中添加详情页的路由

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import { Home, Detail } from './pages'

function App() {
    return (
        <div className={styles.App}>
            <BrowserRouter>
                <Switch>
                    <Route path="/" component={Home} exact />
                    <Route path="/detail/:id" component={Detail} /> {/* 路由添加参数id */}
                </Switch>
            </BrowserRouter>
        </div >
    );
}

export default App;

2. Home.tsx中跳转到详情页的路由

1. 使用高阶函数:

   import React from "react";
   import { withRouter } from "react-router-dom"; // 高阶函数
   
   const HomeComponent: React.FC = ({ history, location, match }) => {
       console.log(history, location, match);
       return (
           <div onClick={() => history.push(`detail/123456`)}>
               跳转至详情页，并传递参数id
           </div>
       );
   }
   
   export const Home = withRouter(HomeComponent); // 使用高阶函数封装路由
   

2. 使用hook:

   import React from 'react';
   import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom'; // hook
   
   export const Home: React.FC = () => {
   
       // 使用hook
       const history = useHistory();
       const location = useLocation();
       const params = useParams();
       const match = useRouteMatch();
   
       return (
           <div onClick={() => history.push(`detail/123456`)}>
               跳转至详情页，并传递参数id
           </div>
       );
   };
   

3. 使用Link:

   import React from "react";
   import { Link } from "react-router-dom"; // link
   
   export const Home: React.FC = () => {
       return (
           <Link to={`detail/123456`}>
               跳转至详情页，并传递参数id
           </Link>
       );
   }
   

3. Detail.tsx详情页中获取参数

import React from 'react';

export const Detail: React.FC = (props) => {
    console.log(props.match.params.id);
}