react多级路由的嵌套使用及参数的传递

一级路由/home    /about

import React, { Component } from "react";
import { Route, Switch,Redirect } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import MyNavLink from "./components/MyNavLink";
import Header from "./components/Header";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生html中，靠<a>跳转不同的页面 */}
              {/* <a className="list-group-item" href="./about.html">About</a>
							<a className="list-group-item active" href="./home.html">Home</a> */}

              {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
              <MyNavLink to="/about">About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由,switch可以匹配某一个路由，之后就不会在向下匹配了，可以提高匹配的效率 */}

                <Switch>
                  <Route path="/about" component={About} />
                  <Route path="/home" component={Home} />
                  <Redirect to="about"/>{/*当前面的路径都没有匹配上的时候，就会重定向到about*，一般用处页面一开始进来的时候做数据展示的首页*/}
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

二级路由：home组件里面有二级路由，/home/news和/home/message,因为每一次路由的变化都是从根路由出查找，所以，二级路由必须带上/home，否则找不到

import React, { Component } from "react";
import MyNavLink from "../../components/MyNavLink";
import { Switch, Route, Redirect } from "react-router-dom";
import Message from "./Message";
import News from "./News";

export default class Home extends Component {
  render() {
    return (
      <div>
        <h2>Home组件内容</h2>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <MyNavLink to="/home/news">News</MyNavLink>
            </li>
            <li>
              <MyNavLink to="/home/message">Message</MyNavLink>
            </li>
          </ul>
          <Switch>
            <Route path="/home/news" component={News} />
            <Route path="/home/message" component={Message} />
            <Redirect path="/home/news" component={News} />
          </Switch>
        </div>
      </div>
    );
  }
}

父组件向子组件传递参数

路由参数的传递分为三种，在ajax里面的传递参数的形式分别是：params参数，query参数，body参数

在react路由里面传递参数对应的就是：params，search, state

先结论：向路由组件传递参数

       1、params参数:

                   路由链接（携带参数）：<Link to={`/home/message/detail/${msgaObj.id}/${msgaObj.title}`}>{msgaObj.title}</Link>

                   注册路由（声名接收）：<Route path="/home/message/detail/:id/:title" component={Detail}></Route>

                   接收参数： this.props.match.params

       2、search参数

                   路由链接（携带参数）：<Link to={`/home/message/detail?id=${msgaObj.id}&title=${msgaObj.title}`}>{msgaObj.title}</Link>

                   注册路由（声名接收）：<Route path="/home/message/detail" component={Detail}></Route>

                   接收参数： this.props.location.search                

                   备注： 获取的search是urlencode编码的字符串，需要借助querystring解析

      3、state参数

                   路由链接（携带参数）： <Link to={{path:"/home/message/detail",state:{id:msgaObj.id,title:msgaObj.title}}}>{msgaObj.title}</Link>

                   注册路由（声名接收）：<Route path="/home/message/detail" component={Detail}></Route>

                   接收参数： this.props.location.state                

                   备注： 刷新也可以保留住参数

一、传递params参数

import React, { Component } from "react";
import { Route, Link, Switch } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
  state = {
    messageArr: [
      { id: "01", title: "消息1" },
      { id: "02", title: "消息2" },
      { id: "03", title: "消息3" },
    ],
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgaObj) => {
            return (
              <li key={msgaObj.id}>
                <Link
                  //传递params参数
                  to={`/home/message/detail/${msgaObj.id}/${msgaObj.title}`}
                >
                  {msgaObj.title}
                </Link>
              </li>
            );
          })}
        </ul>
        <hr />
        <Switch>
          <Route
            //params参数用：id/:title占位符
            path="/home/message/detail/:id/:title"
            component={Detail}
          ></Route>
        </Switch>
      </div>
    );
  }
}

在Detail组件中接收params参数使用this.porps.math.params

import React, { Component } from "react";
const DetailData = [
  { id: "01", content: "你好，中国" },
  { id: "02", content: "你好，宝宝" },
  { id: "03", content: "你好，媳妇" },
];
export default class Detail extends Component {
  render() {
    //接收params参数
    const { id, title } = this.props.match.params;
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id;
    });
    return (
      <div>
        <ul>
          <li>id：{id}</li>
          <li>title:{title}</li>
          <li>content:{findResult.content}</li>
        </ul>
      </div>
    );
  }
}

二、传递query参数，父组件向子组件Detail传递query参数，也叫search参数

import React, { Component } from "react";
import { Route, Link, Switch } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
  state = {
    messageArr: [
      { id: "01", title: "消息1" },
      { id: "02", title: "消息2" },
      { id: "03", title: "消息3" },
    ],
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgaObj) => {
            return (
              <li key={msgaObj.id}>
                {/* 向路由组件传递search参数 */}
                <Link to={`/home/message/detail?id=${msgaObj.id}&title=${msgaObj.title}`}>{msgaObj.title}</Link>
              </li>
            );
          })}
        </ul>
        <hr />
        <Switch>
          {/* search参数无需声名，正常注册路由即可 */}
          <Route path="/home/message/detail" component={Detail}></Route>
        </Switch>
      </div>
    );
  }
}

子组件Detail接收参数，通过querystring库来解析传递过来的search参数

import React, { Component } from "react";
import qs from "querystring";
const DetailData = [
  { id: "01", content: "你好，中国" },
  { id: "02", content: "你好，宝宝" },
  { id: "03", content: "你好，媳妇" },
];
export default class Detail extends Component {
  render() {
    const { search } = this.props.location;
    //将search里面以&拼接的key value字符串转换成对象
    const { id, title } = qs.parse(search.slice(1));
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id;
    });
    return (
      <div>
        <ul>
          <li>id：{id}</li>
          <li>title:{title}</li>
          <li>content:{findResult.content}</li>
        </ul>
      </div>
    );
  }
}

三、传递state参数

import React, { Component } from "react";
import { Route, Link, Switch } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
  state = {
    messageArr: [
      { id: "01", title: "消息1" },
      { id: "02", title: "消息2" },
      { id: "03", title: "消息3" },
    ],
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgaObj) => {
            return (
              <li key={msgaObj.id}>
                <Link to={{path:"/home/message/detail",state:{id:msgaObj.id,title:msgaObj.title}}}>{msgaObj.title}</Link>
              </li>
            );
          })}
        </ul>
        <hr />
        <Switch>
          <Route path="/home/message/detail" component={Detail}></Route>
        </Switch>
      </div>
    );
  }
}

接收state参数

import React, { Component } from "react";
const DetailData = [
  { id: "01", content: "你好，中国" },
  { id: "02", content: "你好，宝宝" },
  { id: "03", content: "你好，媳妇" },
];
export default class Detail extends Component {
  render() {
    //接收state参数
    const { id, title } = this.props.location.state || {};
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id;
    })||{};
    return (
      <div>
        <ul>
          <li>id：{id}</li>
          <li>title:{title}</li>
          <li>content:{findResult.content}</li>
        </ul>
      </div>
    );
  }
}