react-router-dom

官网：https://reactrouter.com/web/guides/quick-start

一、安装

npm i react-router-dom -S

 二、引入

　　hash模式

// 使用<Router>包裹组件
import { HashRouter as Router } from 'react-router-dom';

// 或使用<HashRouter>包裹组件
import { HashRouter } from 'react-router-dom';

　　history模式

// 使用<Router>包裹组件
import { BrowserRouter as Router } from 'react-router-dom';

// 或使用<BrowserRouter >包裹组件
import { BrowserRouter } from 'react-router-dom';

三、Link组件

　　Link跳转，to属性：跳转路径，可以是string、object、funcrion

// 使用<Router>包裹组件
import { HashRouter as Router, Link, Route, NavLink } from 'react-router-dom';

class FatherCom extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                {/* 外层必须用Router包裹，basename：基准路由，自动拼接Link指定路径 */}
                <Router basename="/admin">
                    公共显示部分
                    {/* Link跳转 */}
                    {/* to:string,跳转至对应路由：/admin/page1/123?sort=name,添加replace属性即为进行的replace跳转 */}
                    <Link to="/page1/123?sort=name" replace>toPage1</Link>
                    {/* to:object,跳转至pathname，同时可以携带参数：/admin/page1?sort=name#the-hash */}
                    <Link to={{
                        pathname: '/page2',
                        search: "?sort=name",
                        hash: "#the-hash",
                        state: { fromDashboard: true }
                    }}>toPage2</Link>
                    {/* to:function，跳转至：/admin/page3?sort=name,当前路由改变参数：location => `${location.pathname}?sort=name` */}
                    <Link to={() => '/page3?sort=name'}>toPage3</Link>
                </Router>
            </div>
        )
    }
}

四、Route组件

　　当path属性和当前URL匹配时，渲染对于组件

　　Route组件的三种渲染方式：component、render、children

　　其中children中的函数无论是否匹配都会执行，接收参数match，如果不匹配返回null

　　component、render、children能够同时存在，权重component>render>children

import { HashRouter as Router, Link, Route, NavLink } from 'react-router-dom';

function Page1() {
    return (
        <div>这里是page1</div>
    )
}
function Page3() {
    return (
        <div>这里是page3</div>
    )
}
class FatherCom extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <Router basename="/admin">
                    公共显示部分
                    {/* Link跳转 */}
                    <Link to="/page1/123?sort=name" replace>toPage1</Link>
                    <Link to={{
                        pathname: '/page2',
                        search: "?sort=name",
                        hash: "#the-hash",
                        state: { fromDashboard: true }
                    }}>toPage2</Link>
                    <Link to={() => '/page3?sort=name'}>toPage3</Link>
                    {/* Route渲染 */}
                    <Route path="/page1/:id" component={(data) => {
                        console.log(data) // 可接收URL参数
                        return (<Page1 />)
                    }}></Route>
                    <Route path="/page2" render={() => <div>这里是page2</div>}></Route>
                    <Route path="/page3" children={({match}) => {
                        console.log(match)
                        return (<Page3 />)
                    }}></Route>
                </Router>
            </div>
        )
    }
}

四、NavLink组件

　　常用属性：

　　1.activeStyle：该元素活动状态时的样式

　　2.activeClassName：该元素活动状态时的类名

　　3.isActive：无论是否匹配URL都会执行，接收match为null为不匹配

import { HashRouter as Router, Link, Route, NavLink } from 'react-router-dom';

class FatherCom extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <Router basename="/admin">
                    {/* NavLink是Link的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数 */}
                    <NavLink exact strict
                        to={() => '/page1?sort=name'}
                        activeStyle={{
                            fontWeight: 'bold',
                            color: 'red'
                        }}
                        isActive={(match, location) => {
                            if (!match) {
                                return false;
                            }
                            console.log(match)  // match为null时和当前URL不匹配
                        }}
                    >toPage1</NavLink>
                    <Route path="/page1" component={(props) => {
                        console.log(props) // 可接收URL参数
                        return (<div>这里是page1</div>)
                    }}></Route>
                </Router>
            </div>
        )
    }
}

五、Redirect组件

　　重定向，不符合条件时改变跳转跳转路由

　　Redirect from属性是地址与from匹配（可以用正则），才会重定向到to属性指定的路径

　　Redirect from属性如果没有，则默认是匹配所有的路径

import { HashRouter as Router, Redirect, Route, NavLink } from 'react-router-dom';

class FatherCom extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <Router basename="/admin">
                    <NavLink exact strict
                        to={() => '/page1/123'}
                    >toPage1</NavLink>
                    <Route path="/page1/:id" component={(props) => {
                        return props.match.params?.id?<div>详情页</div>:<Redirect to="/login" />
                    }}></Route>
                </Router>
            </div>
        )
    }
}

六、Switch组件

　　Switch 是Route 从上到下匹配，如果有一个匹配，后面的就不会再继续匹配了

import { HashRouter as Router, Redirect, Route, Switch } from 'react-router-dom';

class FatherCom extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <Router>
                    <Switch>
                        <Route exact path="/">
                            主页
                        </Route>
                        <Route path="/detail">
                            详情
                        </Route>
                        <Redirect from="/other" to="/login" />
                        <Route path="/login">
                            登录
                        </Route>
                    </Switch>
                </Router>
            </div>
        )
    }
}