React路由react-router-dom_react-router-dom 函数式

文档分享

react-router
react-router-dom
Ant Design of React
webpack配置React
路由的理解

React router和React-router-dom

React router

React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。

当我们使用它的时候可能还要手动引入加载其它资源，否则会报错，比如Location

import createBrowserHistory from 'history/lib/createBrowserHistory'
1

React-router-dom

React-router-dom提供了BrowserRouter, Route, Link等api;我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。

cnpm i react-router-dom --save
1

React-router-dom的核心功能

先来看一个Demo

入口文件

// 创建组件，生命周期
import React from 'react'
// 操作DOM
import ReactDom from 'react-dom'
import App from './App.jsx'
ReactDom.render(<App></App>,document.querySelector('#app'))
1
2
3
4
5
6

App.jsx

import React from 'react'
import {
    HashRouter, Route, Link } from 'react-router-dom'
import About from './components/About.jsx'
export default class App extends React.Component {
   
    constructor(props){
   
        super(props)
    }
    render(){
   
        return <HashRou
1
2
3
4
5
6
7
8
9
10
11
12