React路由基础

路由使用步骤

安装

npm i react-router-dom -D

引入并使用：

// 1.引入路由
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
class Demo extends React.Component {
    render() {
        return (
            // 2.Router包裹整个应用
            <Router>
                <div>
                    路由入口
                    {/* 3.指定路由入口，当作a标签使用 */}
                    <Link to="/First">显示出口组件</Link>
                    {/* 4.指定路由出口（组件2渲染位置） */}
                    <Route path="/First" component={First}></Route>
                </div>
            </Router>
        )
    }
}

class First extends React.Component {
    render() {
        return (
            <div>
                路由出口
            </div>
        )
    }
}
ReactDOM.render(<Demo />, document.getElementById('root'))

编程式导航

主要功能：页面跳转（组件跳转）

// 1.引入路由
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
class Demo extends React.Component {
    render() {
        return (
            // 2.Router包裹整个应用
            <Router>
                <div>
                    显示路由
                    {/* 3.指定路由入口，当作a标签使用 */}
                    <Link to="/First">显示登录页面</Link>
                    {/* 4.指定路由出口 */}
                    <Route path="/First" component={First}></Route>
                    <Route path="/Two" component={Two}></Route>
                </div>
            </Router>
        )
    }
}

class First extends React.Component {
    // 点击事件通过this.props.history.push('/Two')跳转到Two页面
    handle = ()=> {
        this.props.history.push('/Two')
    }
    render() {
        return (
            <div>
                登陆页面
                {/* 绑定点击事件 */}
                <button onClick={this.handle}>登录</button>
            </div>
        )
    }
}

class Two extends React.Component {
    // 通过this.props.history.go(-1)往回跳转一个页面
    ret = () => {
        // 往回跳转一个页面
        this.props.history.go(-1)
    }
    render() {
        return (
            <div>
                首页
                <button onClick={this.ret}>返回到登陆页面</button>
            </div>
        )
    }
}

// 这里不传入参数
ReactDOM.render(<Demo />, document.getElementById('root'))

简单的默认路由匹配模式：

// 只要path的前缀带有/都会被匹配(模糊匹配)
// 所以点击时，以下两个路由都会被匹配到并展示
<Link to="/First">显示登录页面</Link>

// 默认路由,默认情况下会展示
<Route path="/" component={Two}></Route>
<Route path="/First" component={First}></Route>

// 如果我们不想点击时展示Two默认组件
// 我们就可以使用精准匹配，给Route加上一个exact属性
<Route exact path="/" component={Two}></Route>