zoukankan      html  css  js  c++  java
  • react-router-dom

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

    一、安装

    cnpm 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>
            )
        }
    }
  • 相关阅读:
    2.4 使用vue-cli创建项目/项目打包/发布
    2.3 vue-cli脚手架工具/nodejs
    2.2 vue的devtools、eslint检测问题
    2. es6扩展运算符
    文件json
    函数
    函数不固定参数
    监控日志,加入黑名单
    非空即真
    随机生成手机号,存入文件
  • 原文地址:https://www.cnblogs.com/jing-zhe/p/14502795.html
Copyright © 2011-2022 走看看