react路由

安装

• 浏 览 器 端 应 用:npm install --save react-router-dom -S

• React Native 应用:npm install --save react-router-native -S

使用

• 路由安装完毕后，在入口文件中导入路由模块:(index.js)

import {BrowserRouter as Router} from "react-router-dom";

• 把Router组件包在根组件上:(index.js)

ReactDOM.render(<Router><App /></Router>, window.app);

• 在根组件(App.js)中引入Router

import { Route, Link } from "react-router-dom";

• 在跟组件中定义规则

1.基础路由

import React from "react"
import { Route, Link } from "react-router-dom";
import Home from "./Home"
import List from "./List"
import User from "./User"
class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <ul>
                    <li>
                        <Link to="/">首页</Link>
                    </li>
                    <li>
                        <Link to="/list">列表页</Link>
                    </li>
                    <li>
                        <Link to="/user">用户中心</Link>
                    </li>
                </ul>
                <Route path="/" exact component={Home}></Route>
                <Route path="/list" component={List}></Route>
                <Route path="/user" component={User}></Route>
            </div>
        )
    }
}
export default App;

2.嵌套路由

在基础路由的User组件中加如两个子组件Reg，Login，其他不变，故User组件代码更新为：

import React from "react";

import { Route, Link } from "react-router-dom";
import Reg from "../pages/user/Reg";
import Login from "../pages/user/Login";

export default class User extends React.Component {
  render() {
    return (
      <div>
        <h1>用户中心</h1>
        <Link to="/user/reg">注册</Link>
        <Link to="/user/login">登陆</Link>
        <Route path="/user/reg" component={Reg}></Route>
        <Route path="/user/login" component={Login}></Route>
      </div>
    );
  }
}

3.动态路由

增减一个页面级详情页面(Detail),下List中点击对应的商品，跳转到详情页

首先在根组件中定义规则

import Detail from "./pages/Detail"

<Route path="/detail/:id" component={Detail}></Route> //携带上商品id

在List中点击进行跳转(List.js)

import React from "react";

import { Link } from "react-router-dom";
export default class List extends React.Component {
  render() {
    return (
      <div>
        <h1>列表页</h1>
        <ul>
          <li>
            <Link to="/detail/1">第1条商品详情</Link>
          </li>
          <li>
            <Link to="/detail/2">第2条商品详情</Link>
          </li>
          <li>
            <Link to="/detail/3">第3条商品详情</Link>
          </li>
          <li>
            <Link to="/detail/4">第4条商品详情</Link>
          </li>
        </ul>
      </div>
    );
  }
}

在Detail组件中接收并使用id

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

4.编程式路由

首先引入history模块并创建history(在那个组件使用就在那个组件引入)

import { createBrowserHistory } from 'history';
let history = createBrowserHistory({
    forceRefresh:true  //强制刷新
});

在Detail组件中使用，点击返回上一级(Detail.js)

  <button onClick={()=>{history.goBack()}}>返回</button> 
  <button onClick={()=>{history.go(-1)}}>返回</button>

在列表页使用，点进跳转任意路由(List.js)

注意 ：使用动态路由中的push时，不会自动跳转，需要强制刷新

<button onClick={()=>history.push("/detail/1000")}>到100号商品</button> forceRefresh:true //强制刷新

5.重定向路由&Switch

目的：在App组件中，当用户点击User时，重定向到Home组件,(App.js)

当匹配不到页面时，显示404组件

import { Route, Link,Redirect,Switch } from "react-router-dom";

        {/* 配置规则 */}
        <Switch>
          {/* 重定向路由 */}
          <Redirect from="/user" to="/" />
          <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>
          <Route component={Err}></Route>
        </Switch>