本文共 2638 字，大约阅读时间需要 8 分钟。

react技术1-集成react router

前端各种架构技术的飞速发展，百家齐放，大部分框架都自动帮助我们集成了一些技术，方便我们使用。很容易盲目的往期走，却忘记了这些基本的操作是如何集成的。本章节会教大家如何集成 React Router，后续还会有更多技术集成，有兴趣的小伙伴关注一下～。

create-react-app 快速启动一个项目(简单介绍)

使用 create-react-app reactdemo 快速新建一个名为 reactdemo 的项目，进入项目目录启动。

cd reactdemoyarn start

react-router

Router 是每个项目必不可少的点。我们不能仅仅只用 Link 标签去进行跳转页面，很多流程下我们是通过执行完某部分代码后才进行的页面跳转。所以第一部分，我们试着引入路由。

1、新建页面

首先页面跳转就要先有页面，我们在 src 下新建两个文件夹 index 和 home， 并且在每个文件夹下都新建 index.jsx、index.css 文件。

2、导入路由

打开命令行工具，我们需要导入几个包 react-router 和 react-router-dom：

yarn add react-routeryarn add react-router-dom

或者可以使用 npm（后续不再展示）。

npm i react-router --savenpm i react-router-dom --save

3、路由编写

在 src 下新建 router.js 文件。

import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Index from './index/index';
import Home from './home';
const Router = ({history}) => (
  
   
    
    
      
     
      
     
    
    
  
   
);
export default Router;

其中，exact 表示严格匹配模式，若置为 false 时，根据路由匹配所有组件。如 / 匹配 /、/home、/home/menu 等。所以请将此带上。.path 为路径名称。

后续每新增一个页面，都要在这里进行路由配置。这时我们就可以删除 App.js、App.css、App.test.js 三个文件了，没什么用，占位置。

路由文件写好后，我们要在 src/index.js 文件引入它。

// 替换 ...
- import App from './App';
+ import Router from './router';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
  
   
    
    
     
      -  
     
    
      
+     
      
    
       
    
      
    ,
    document.getElementById('root'));
     
    
   

4、验证效果

打开 http://localhost:3000/#/home 和 http://localhost:3000/#。

5、实现在事件中的路由跳转

这里来个小插曲，我们快速的导入一下 antd 库，这样按钮比较好看~。

yarn add antd

在 src/index.css 第一行加上如下代码：

@import '~antd/dist/antd.css';

好了，我们继续打开 src/index/index.js 文件。

import React from 'react';
import {Button} from 'antd';
import './index.css';
const IndexPage = ({history}) => {
  const goToHome = () => {
    history.push({
      pathname: '/home',
    });
    // history.push({ pathname: '/home', search: '?name=search' });
  };
  return (
    
   
      
    
      
     跳转到 Home
    
    
   
  );
};
export default IndexPage;

其中，history.pushliğinin push tangible state props-work加上一些特定参数。这将允许我们通过上述方式实现路由跳转。

例如，你可以这样做：

const goToHome = () => {
  history.push({
    pathname: '/home',
    search: '?name=search'
  });
};

这样做后，你将看到路由变成 http://localhost:3000/#/home?name=search，并且可以通过 console.log(props.location.search) 取到参数。

6、使用 URL 传值

而对于希望通过 URL 传值，可以这样做：

const goToHome = () => {
  history.push({
    pathname: '/home',
    search: '?name=search'
  });
};

同样，你可以通过 console.log(props.location.search) 取到参数。

7、使用 query 参数

如果你是使用 Umi 项目，可以使用以下代码进行路由跳转和参数传递：

history.push({
  pathname: '/home',
  query: {
    name: '这就是 name',
  }
});

在 /home 页面，可以通过 props.location.query 取到参数对象。这是为了小伙伴们不需要再去截图数据拉。