React16+react-router-dom初步使用心得_react react-router-dom16 prompt-优快云博客

本文链接：https://blog.youkuaiyun.com/Hhalcyon/article/details/107561572

本文介绍了在React16中使用react-router-dom的基本步骤，包括设置index.html、index.js的重要性，以及如何配置路由。通过HashRouter、Switch、exact等元素实现路由管理，并展示了url参数的两种传递方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文不讲怎么安装，讲怎么使用。
单位做项目用的React，在闲的时候想自己试试，写写小demo练下手。React上手没几天，主要是以前学过，但是后来偷懒用Vue写页面，不知不觉已经React16了，按照记忆的路线，删删改改脚手架的文件夹后，惊讶的发现并不能start，看了看package.json后，更一头雾水。
在这里插入图片描述
度娘了一下，关于这方面的资料比较少，多数的解释是你看看node_modules的源文件，可以看到XXXXX。。。远水治不了近渴，首要的，是让我的小demo能够运行起来，经过我的多次失败的尝试，总结出来了两点：
1、在public下面要有一个index.html，并且名字一定是index，不然会报错文件找不到。这个文件是用来放最核心的html结构的文件，我的内容如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div id="root"></div>
</body>

然后有个点，就是一定要注意自己将要被添加Dom节点的名字，因为在后面ReactDOM.render()的时候会去根据你写的条件查找Dom节点，节点名字没对会报错。例如我这里是要在id='root’这个点添加内容，那么我的ReactDOM就这么写：

ReactDOM.render(<Router />, document.getElementById('root'))

2、在src中一定要有一个名字为index.js的文件，并且名字一定是index，原因同上。这个文件放app.js等内容，也可以是Router组件的引用等等。我的文件内容如下：

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import Router from './router';

ReactDOM.render(<Router />, document.getElementById('root'))

内容虽然简单，已经精简到精炼了。

也看到我到index.js文件中引用了路由，那么我们下一步要解决的，就是路由的问题，这里为了学习新知识，没有用react-router而是用的react-router-dom，区别就在于，react-router-dom会提供更多的api，更多功能。
先看看我的router.js 文件：

import React, { Component } from 'react';
import { Route, Switch, HashRouter } from 'react-router-dom';
import A from './a';
import B from './b';
import Home from './home';


class Router extends Component {
  render() {
    return (
      <HashRouter>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route exact path='/a' component={A} />
          <Route exact path='/a/:id' component={A} />
          <Route exact path='/b' component={B} />
        </Switch>
      </HashRouter>
    )
  }
}

export default Router;

HashRouter：路由使用hash模式，可以用Router
exact：精确匹配
Switch：当有匹配的路由的时候，只渲染一个路由。
eg:
前提：有Switch 无exact
/a 渲染根路径
/a/xxxxxx渲染根路径
前提：有Switch 有 exact
/a 渲染当前路径
/a/xxx 渲染/a路径

url传参有两个方式定义：
1、可以由/a/:id定义，取值的时候可以用

this.props.match.params

例如，我在home.js中定义两个按钮

import React, { Component } from 'react';
import { Button } from 'antd';

class Home extends Component {
  constructor(props) {
    super(props);
  }
  aClick = () => {
    this.props.history.push('/a/123456')
  }
  bClick = () => {
    this.props.history.push('/b')
  }
  render() {
    return (
      <div >
        <Button onClick={() => { this.aClick() }} >跳到A页面</Button>
        <Button onClick={() => { this.bClick() }} >跳到B页面</Button>
      </div>
    )
  }
}

export default Home;

a.js的页面：

import React, { Component } from 'react';

class A extends Component {
  componentDidMount() {
    console.log(this.props.match.params)
  }
  render() {
    return (
      <div >
        我是A页面
      </div>
    )
  }
}
export default A;

效果：
在这里插入图片描述

2、在函数里面定义pathname、state
我将代码修改了一下，将home.js中’跳到A页面’按钮的回调函数改成：

 aClick = () => {
    this.props.history.push(
      {
        pathname: '/a',
        state: {
          id: 777888999
        }
      }
    )
  }

相同的，我取值的方法也会发生改变，在a.js我也做出了修改。

 componentDidMount() {
    console.log(this.props.history.location.state)
  }

效果：
在这里插入图片描述

到这里，就说得差不多了，但是还有很多有趣的点没有说：eject的具体使用、react-router-dom的鉴权登陆、嵌套路由等等，如果要仔细了说，应该每个点都可以拆成一片文章，如果有机会我也会总结出来的。最后，附上我的文件结构图：
在这里插入图片描述
如果有不正确的，欢迎指正，我及时修改。

本文参考：
https://www.jianshu.com/p/8954e9fb0c7e
https://www.cnblogs.com/guanghao/p/10827599.html