React 路由的使用方法

時間 2019-11-07

標籤 react 路由使用方法欄目 React 简体版

原文原文鏈接

安裝依賴

安裝路由模塊：npm i react-router-dom -Sreact

基本路由

首先咱們新建立一個react項目(create-react-app demo)用來演示ios

而且刪去不須要的代碼，新建幾個JS頁面用來測試，以下：git

接着咱們須要在index.js文件中引入咱們安裝的依賴（若是你以爲名字長的話，可使用as起一個別名）
記得必定要把根組件（<App />）包起來才能夠，這樣其餘組件纔可使用路由npm

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中引入所須要的依賴和要使用的組件，
並配置路由規則，設置點擊跳轉axios

App.js代碼：bash

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;
複製代碼

效果演示：react-router

嵌套路由

在上面的基礎上，咱們在src下新建一個user文件夾，用來存放註冊和登陸頁面，以下：app

咱們想要在哪一個頁面下嵌套的話，那麼就在該頁面下配置路由dom

咱們想要在用戶中心頁面中嵌套頁面，則在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;
複製代碼