React路由模块react-router-dom的安装及基本使用、传递路由参数

一、路由模块

在React项目中 若要实现页面的跳转 需使用路由
而react-router-dom正是React推荐的常用路由模块

安装

npm install react-router-dom

按需导入react-router-dom路由模块

HashRouter是路由的根容器 所有和路由相关的东西都要包裹在HashRouter内部 且一个网站只需要使用一次HashRouter
Router是路由规则(rules) 其上有两个重要属性：path和component
Link表示路由链接 类似于Vue中的<router-link>

import {
   HashRouter,Route,Link} from 'react-router-dom'

使用

App.jsx：

import Index from '@/components/Index'
import Type from '@/components/Type'
import About from '@/components/About'

export default class App extends React.Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   }
    }
    
    render() {
    
        // 当使用<HashRouter>将根组件的元素包裹起来后 网站即启动路由
        // 在<HashRouter>内部只能有唯一的根标签
        return <HashRouter&g