React-Router

概要

这篇专题描述 React Router 的相关注意事项

HashRouter 的使用

HashRouter 需要作为项目的根节点包裹所有的项目元素，通常是在 APP 组件中使用，用来包裹入口，这时网站就会自动启用路由 并且，在一个项目中，只需要一个 HashRouter 元素即可

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

// APP.jsx中
class APP extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <HashRouter>
                <div><h1>这时网站的APP根组件</h1></div>
            </HashRouter>
        )
    }
}

HashRouter 必须包含唯一根节点

// 不合法，会报错
class Test extends React.Component{
    render() {
        return <HashRouter>
            <div>
                <h1>这是网站的APP根组件</h1>
            </div>
            <p>这是另一个节点</p>
        </HashRouter>
    }
}
// 合法
class Test extends React.Component{
    render() {
        return <HashRouter>
            <div>
                <h1>这是网站的APP根组件</h1>
            </div>
        </HashRouter>
    }
}

默认的路由匹配规则

默认情况下，路由的匹配是模糊的，如果希望实现精确匹配，可以通过添加 exact 属性实现

import { HashRouter, Route, Link } from 'react-router-dom'
import Top from '@/components/top.jsx'

// 规则1
<Route path="/movie" component={Top}></Route>
// 对于规则1，以下都会达成匹配条件
<Link to="/movie">Movie</Link>
<Link to="/movie/top100">Movie</Link>
<Link to="/moveie/top100/10">Movie</Link>

// 如果想实现精确匹配，可以通过给 Route 标签添加 exact 属性
<Route path="/movie" component={Top} exact></Route>
// 此时，只有“/movie”才会匹配该规则

在路由规则中使用并获取参数

/home/article/100类似这样的动态路由非常常见，通过不同的文章 id 来读取不同的文章，这时文章 id 便成为了路由中的参数

// 规则1
<Route path="/home/:type/:id" component={Home}></Route>

// 在Home组件内，获取type和id值
class Home extends React.Component {
    constructor(props){
        super(props)
    }
    componentWillMount() {
        // 获取type
        console.log(this.props.match.params.type)
        // 获取id
        console.log(this.props.match.params.id)
    }
}