react router 4.x

Posted 2021-02-06 chengyunshen

学习React，必须要学习React router

目前 2.x和4.x都可以用,我在项目中直接安装，默认是4.x版本，然后就踩一下。

4.x和2.x的区别（3.x和2.x没有区别,但2.x还在维护）

• 4.x路由不再是集中式的，路由规则存在于布局和组件之间。
• 4.x的路由不再需要嵌套来实现布局结构和页面（组件）嵌套。
• 4.x没有 props.children 来渲染组件。在4.x中<Route />组件在哪里写，组件就在哪里渲染。
• 4.x中路由规则是包容性的，也就是多个<Route />可以同时匹配和渲染。

下面是代码示例，（我写在 create-react-app脚手架中）

import React, { Component }  from ‘react‘;

import { BrowserRouter,Route,Link,Switch} from ‘react-router-dom‘


class About extends Component {
    render(){
        return (
        <h1>About</h1>
        )
    }
}

class Inbox extends Component {
    render(){
        return (
        <h1>Inbox</h1>
        )
    }
}

class Home extends Component {
    render (){
        return (
        <h1>Home</h1>
        )
    }
}

const App = () => (
    <BrowserRouter>
        <div>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route  path="/about" component={About} />
                <Route  path="/inbox" component={Inbox} />
                                <Redirect  to="/"  />
            </Switch>
        
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/inbox">Inbox</Link></li>
                <li><Link to="/about"> about</Link></li>
            </ul>
        </div>
    </BrowserRouter>
)
export default App;

1.BrowserRouter 表示history模式, HashRouter 表示哈希模式，这个跟其他路由一样，并且是作为路由的最大容器。
2.在4.x中，所有 路由组件都必须写在上边提到的这两个组件中。
3.在路由容器中，只能并列存在一个元素或组件。
4.<Switch />表示排他性路由，就是说 当前<Switch />下只有一个能匹配并渲染，这时候要注意 里边<Route />的书写顺序。
5.exact参数表示非包容性匹配，可以直接理解为严格匹配或完全匹配（我自己的理解，可能不对，欢迎讨论），反正这里如果没有exact参数 ，就只渲染 <Home />（因为还是包容性匹配，加上<Switch />和书写顺序的作用，就永远只显示<Home />组件）,如果<Switch />也没有的话，就是包容性匹配，比如 /about 会渲染 <Home>和 <About>两个组件。
6.鉴于上一条，推荐最后引入根路由匹配。
7.<Switch /> 搭配 <Redirect /> 可以重定向， <Redirect / >一定放到最后。