React 路由的使用方法

安装依赖

安装路由模块：npm i react-router-dom -S

基本路由

首先咱们新建立一个react项目(create-react-app demo)用来演示

而且删去不须要的代码，新建几个JS页面用来测试，以下：

接着咱们须要在index.js文件中引入咱们安装的依赖（若是你以为名字长的话，可使用as起一个别名）
记得必定要把根组件（<App />）包起来才能够，这样其余组件才可使用路由

index.js代码：

import React from "react"
import ReactDOM from 'react-dom'
import App from './App'
//引入路由依赖，并起一个别名，由于原先的名字太长了
import {BrowserRouter as Router} from 'react-router-dom'

ReactDOM.render(
    //把根组件用BrowserRouter包起来，这里我用了别名
    <Router>
        <App />
    </Router>
,document.getElementById('app'))
复制代码

接着在App.js中引入所须要的依赖和要使用的组件，
并配置路由规则，设置点击跳转

App.js代码：

import React, { Component } from 'react';
//导入路由依赖和组件
import { Route, Link } from "react-router-dom"
import Home from "./Home"
import List from "./List"
import User from "./User"

class App extends Component {
    render() {
        return (
            <>
                <ul>
                    <li>
                        <Link to="/">首页</Link>
                    </li>
                    <li>
                        <Link to="/list">列表页</Link>
                    </li>
                    <li>
                        <Link to="/user">用户中心</Link>
                    </li>
                </ul>

                {/* 配置路由规则  exact表示精确匹配，防止匹配其余页面的时候匹配到/，也就是首页*/}
                <Route path='/' exact component={Home}></Route>
                <Route path='/list' component={List}></Route>
                <Route path='/user' component={User}></Route>

            </>
        )
    }
}
export default App;
复制代码

效果演示：

嵌套路由

在上面的基础上，咱们在src下新建一个user文件夹，用来存放 注册和登陆页面，以下：

咱们想要在哪一个页面下嵌套的话，那么就在该页面下配置路由

咱们想要在用户中心页面中嵌套页面，则在User.js文件中导入路由依赖和组件并配置路由

修改User.js文件代码：

import React,{Component} from 'react';
//导入路由依赖和组件
import { Route, Link } from "react-router-dom"
import Reg from "./user/Reg"
import Login from "./user/Login"

class User extends Component{
    render(){
        return(
            <>
                <h1>用户中心</h1>
                <ul>
                    <li>
                        <Link to="/user/reg">注册</Link>
                    </li>
                    <li>
                        <Link to="/user/login">登陆</Link>
                    </li>
                </ul>

                {/* 配置路由 */}
                <Route path="/user/reg" component={Reg}></Route>
                <Route path="/user/login" component={Login}></Route>
            </>
        )
    }
}
export default User;
复制代码

效果演示：

动态路由

在src下新建一个Detail.js文件，用来展现列表详情：

import React from "react"

// 获得id,发起axios请求，获取详情的数据
class Detail extends React.Component {
    componentDidMount(){
        console.log(this.props.match.params.id)
    }
    render() {
        return (
            <div>
                <h2>商品详情页面</h2>
                <h4>{"发起axios请求获取"+this.props.match.params.id+"号商品的数据"}</h4>
            </div>
        )
    }
}

export default Detail
复制代码

接着修改List.js中的代码：

import React,{Component} from 'react';
//使用Link
import {Link} from 'react-router-dom'
class List extends Component{
    render(){
        return(
            <>
                <h1>列表页</h1>
                <ul>
                    <li><Link to='/detail/1'>第一号商品</Link></li>
                    <li><Link to='/detail/2'>第二号商品</Link></li>
                    <li><Link to='/detail/3'>第三号商品</Link></li>
                </ul>
            </>
        )
    }
}
export default List;
复制代码

最后咱们须要在App.js中引入Detail.js文件，并配置路由：

import Detail from './Detail'

//记得在/detail后面加/:id
<Route path='/detail/:id' component={Detail}></Route>
复制代码

运行效果：

编程式路由

修改List.js文件，
引入 history 依赖，生成history，并配置history，
定义按钮，实现跳转：

import React,{Component} from 'react';
//使用Link
import {Link} from 'react-router-dom'
//引入
import {createBrowserHistory} from 'history'
//生成history
let history = createBrowserHistory({
    //配置强制刷新，若是不刷新，则没反应，须要手动刷新才会跳转
    forceRefresh:true
})
class List extends Component{
    render(){
        return(
            <>
                <h1>列表页</h1>
                <ul>
                    <li><Link to='/detail/1'>第一号商品</Link></li>
                    <li><Link to='/detail/2'>第二号商品</Link></li>
                    <li><Link to='/detail/3'>第三号商品</Link></li>
                    <p>......</p>
                    {/* 在history中可使用push方法进行跳转 */}
                    <button onClick={()=>history.push('/detail/100')}>第一百号商品</button>
                </ul>
            </>
        )
    }
}
export default List;
复制代码

接着咱们在Detail.js文件中也引入并生成history
在这里咱们定义一个返回按钮，能够返回上一级：

import React from "react"
//引入
import { createBrowserHistory } from 'history';
// 生成history 
let history = createBrowserHistory();

class Detail extends React.Component {
    componentDidMount(){
        console.log(this.props.match.params.id)
    }
    render() {
        return (
            <div>
                <h2>商品详情页面</h2>
                <h4>{"发起axios请求获取"+this.props.match.params.id+"号商品的数据"}</h4>
                {/* 这两种方法均可以实现返回上一级 */}
                {/* <button onClick={()=>history.goBack()}>返回</button>  */}
                <button onClick={()=>history.go(-1)}>返回</button>
            </div>
        )
    }
}

export default Detail
复制代码

运行效果：

重定向与Switch

通常重定向须要搭配Switch一块儿使用

咱们须要在src下面新建一个404页面，若是匹配不到页面的话，就跳到404页面

import React,{Component} from 'react';
class Error extends Component{
    render(){
        return(
            <><h1>页面飞走了</h1></>
        )
    }
}
export default Error;
复制代码

接下来咱们须要修改App.js文件的代码
引入所须要的依赖和页面，并修改配置路由规则的代码：

import React, { Component } from 'react';
//导入路由依赖和组件
import { Route, Link, Redirect, Switch } from "react-router-dom"
import Home from "./Home"
import List from "./List"
import User from "./User"
import Detail from './Detail'
import Error from './404'

class App extends Component {
    render() {
        return (
            <>
                <ul>
                    <li>
                        <Link to="/">首页</Link>
                    </li>
                    <li>
                        <Link to="/list">列表页</Link>
                    </li>
                    <li>
                        <Link to="/user">用户中心</Link>
                    </li>
                </ul>

                {/* 配置路由规则  exact表示精确匹配，防止匹配其余页面的时候匹配到/，也就是首页*/}
                {/* Switch表示若是匹配到了路由，就再也不往下面匹配了，若是不写Switch，则一直会匹配到404页面 */}
                <Switch>
                    {/* 若是访问我的中心页面，则重定向到列表页面 */}
                    <Redirect from='/user' to='/list'></Redirect>
                    <Route path='/' exact component={Home}></Route>
                    <Route path='/list' component={List}></Route>
                    <Route path='/user' component={User}></Route>
                    <Route path='/detail/:id' component={Detail}></Route>
                    {/* 没有写path表示匹配到全部的路径 */}
                    <Route component={Error}></Route>
                </Switch>
            </>
        )
    }
}
export default App;
复制代码

运行效果：

---

QAQ