React Router 4.0 ---- 嵌套路由和动态路由

Posted 2020-11-01 SamWeb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Router 4.0 ---- 嵌套路由和动态路由相关的知识，希望对你有一定的参考价值。

　　嵌套路由，从广义上来说，分为两种情况：一种是每个路由到的组件都有共有的内容，这时把共有的内容抽离成一个组件，变化的内容也是一个组件，两种组件组合嵌套，形成一个新的组件。另一种是子路由，路由到的组件内部还有路由。

　　对于共有的内容，典型的代表就是网页的侧边栏，假设侧边栏在左边，我们点击其中的按钮时，右侧的内容会变化，但不管右侧的内容怎么变化，左侧的侧边栏始终存在。这个侧边栏就是共有内容，如下图所示

　　这个共有内容要怎么处理？首先想到的就是把这个功能提取出来，写成一个组件，然后再把这个组件依次应用到其它路由组件，如about, products 等。导航栏肯定是一个导航，不过这里我们要使用navLink 组件，因为从图片中可以看到它有高亮显示，我们要设计一个高亮显示的样式。新建一个menus.js 文件，来写这个导航组件

import React from \'react\'
// 引入NavLink 组件
import { NavLink } from "react-router-dom";
import \'./menus.css\'

// 高亮的样式，表示我们在哪个导航下
const selectedStyle = {
  backgroundColor: \'white\',
  color: \'slategray\'
}

// navLink， activeStyle 点击高亮显示当前标签。
export const MainMenu = () => (
  <nav className=\'main-menu\'>
    <NavLink to=\'/\'>首页</NavLink>
    <NavLink to=\'/about\' activeStyle = {selectedStyle}>关于我们</NavLink>
    <NavLink to=\'/events\' activeStyle = {selectedStyle}>企业事件</NavLink>
    <NavLink to=\'/products\' activeStyle = {selectedStyle}>公司产品</NavLink>
    <NavLink to=\'/contact\' activeStyle = {selectedStyle}>联系我们</NavLink>
  </nav>
)

　　可以看到导航的高亮样式可以在NavLink 组件中直接设置，这也是Link 和NavLink的区别。这里还写了一点样式，在menus.css 文件中。

/* 页面左侧主要导航 */
.main-menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 20%;
  min-width: 20%;
  background-color: slategray;
  color: ghostwhite;
}

.main-menu  a {
  color: ghostwhite;
  text-align: center;
  padding: 1em;
  font-size: 1.5em;
}

　　按照上面的说法，我们把这个组件应用到其它组件中，在pages.js中引入该组件，并修改Events，Products，

Contact和 About 组件中，引入的组件命名为MainMenu

// 企业事件内容
export const Events = () => (
    <div>
      <MainMenu></MainMenu>
      <section className="events">
        <h1>企业大事件</h1>
      </section>
    </div>
)

// 公司产品 
export const Products = () => (
  <div>
    <MainMenu></MainMenu>
    <section className="products">
      <h1>公司产品：主要经营 手机、电脑</h1>
    </section>
  </div>
)

// 联系我们
export const Contact = () => (
  <div>
    <MainMenu></MainMenu>
    <section className="contact">
      <h1>联系我们</h1>
      <p>公司电话：0755 - 12345678</p>
    </section>
  </div>
)

　　这时你会发现，相同的代码复制了4遍，还可以接受，毕竟只有一个共有组件。但如果about, home 这些组件有好多共有的部分，我们这样一遍一遍的复制就有点麻烦了。所以还要对page.js文件这些组件相同的内容进行进一步的抽取。抽取的形式应该是

<div>
    <MainMenu></MainMenu>
    // 变化的部分
  </div>

　　现在最主要的部分就是这些变化的部分要怎么处理，想到了其实也很简单，因为React 有一个children 属性，直接把这些变化的部分写成props.childern 就可以了。这时你会发现，这个抽取的组件像一个布局模板，比如单页面应用时的页眉和页脚这些共有的部分，也可以放到这个模版中。新建一个template.js 文件

import React from \'react\'
import { MainMenu } from "./menus";

export const Template = (props) => (
  <div className = \'page\'>
    <MainMenu></MainMenu>
    {props.children}
  </div>
)

　　上面的代码中加了一个样式类page, 在pages.css 中添加一个 page样式，

.page {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin-top: 20px;
}

　　现在再在pages.js中的相应组件中应用Template组件

import { Template } from "./template";// 企业事件内容
export const Events = () => (
  <Template>
    <section className="events">
      <h1>企业大事件</h1>
    </section>
  </Template>

)

// 公司产品 
export const Products = () => (
  <Template>
    <section className="products">
      <h1>公司产品：主要经营 手机、电脑</h1>
    </section>
  </Template>
)

// 联系我们
export const Contact = () => (
  <Template>
    <section className="contact">
      <h1>联系我们</h1>
      <p>公司电话：0755 - 12345678</p>
    </section>
  </Template>
)

　　这时效果就达到了，左侧的侧边栏始终存在。现在我们再来实现一下子路由。

　　子路由：就是当路由匹配成功后，它会渲染出一个组件。这个组件中还有路由，这个路由就是子路由。比如：我进入到about页面，about 组件渲染出来，而about 组件中，还有history, service 要展示，它还需要路由，about 组件中的路由就是子路由，如下图所示

　　about组件上面的导航条，我们还是使用NavLink实现，导航条下面的内容肯定是路由系统。对于这里的路由来说，我们要注意的就是它的path属性，因为它是子路由，我们首先要进入到父组件about下面，才能显示这个路由系统，所以它前面的路径都要加about, 匹配公司服务, 它的path 肯定是’/about/service’; 其它三个对应的则是 about/company, about/location, about/history, 但如果四个路由都这么匹配，就会出现一个问题，首次进入到about 组件时，它什么都不会显示。就是说，我们点击左侧的侧边栏中的 ‘关于我们’，它不会显示任何内容。这里可以这么处理，点击 ‘关于我们’，它肯定会显示四个子路由中的一个，比如显示公司简介，我们就可以把公司简介的路由直接设置成about, 对于子路由来说，父路由进来显示的默认页面，就可以设置和父路由一样。

　　导航条，我们写到menus.js 文件里面，命名为AboutMenu

export const AboutMenu = () => (
  <ul className="about-menu">
    <li>
      <NavLink to=\'/about\' exact activeStyle ={selectedStyle}>公司简介</NavLink>
    </li>
    <li>
      <NavLink to=\'/about/history\' activeStyle ={selectedStyle}>公司历史</NavLink>
    </li>
    <li>
      <NavLink to=\'/about/services\' activeStyle ={selectedStyle}>公司服务</NavLink>
    </li>
    <li>
      <NavLink to=\'/about/location\' activeStyle ={selectedStyle}>企业位置</NavLink>
    </li>
  </ul>
)

　　我们再在pages.js中修改about组件的内容，使其包含路由组件

export const About = () => (
  <Template>
    <section className="about">
      <AboutMenu></AboutMenu>
      <Route path=\'/about\' exact component={Company}/>
      <Route path=\'/about/history\' component={History}/>
      <Route path=\'/about/services\' component={Services}/>
      <Route path=\'/about/location\' component={Location}/>
    </section>
  </Template>
)

　　同时再简单地定义Company, History 等4个显示组件。

export const Services = () => (
  <section>
    <p>公司服务</p>
  </section>
)

export const Location  = () => (
  <section>
    <p>公司位置</p>
  </section>
)

export const Company = () => (
  <section>
    <p>公司简介</p>
  </section>
)

export const History = () => (
  <section>
    <p>公司历史</p>
  </section>
)

　　这时就实现了子路由的功能。

　　动态路由：就是在匹配路径path 的后面加上冒号 + 参数，如path ="products/:id". 比如我们进入产品页面，它有手机，电脑等产品，我们点击单个产品，肯定进入到产品详情页面，我们为每一个产品都建一个产品详情组件，有点不太现实，因为产品太多，写的大累，再说，产品种类是动态增加的，增加一个产品，就增加一个组件，维护起来也太累。最好的办法就是，它们都跳转到一个详情组件，根据不同的产品渲染动态渲染不同的内容，那么产品详情组件就要接受一个参数表示产品类型，这个类型是动态的，所以要用一个变量，路由的格式就是details/:type, 那组件内部怎么得到这个参数呢，我们之前说过，当渲染组件时，路由会给我们组件注入3个参数，这里使用match 就可以了，它有一个params属性，就是专门获取动态路由参数的。

　　我们在products组件内部，写两个link, 用于导航到产品详情，同时写一个产品详情页组件。

// 公司产品 
export const Products = () => (
  <Template>
    <section className="products">
        <Link to=\'/details/telphone\'>手机</Link>
        &nbsp;
        <Link to=\'/details/computer\'>电脑</Link> 
    </section>
  </Template>
)

// 产品详情组件
export const Details = (props) => {
  console.log(props.match.params);
  return <p>这是 {props.match.params.type}详情内容</p>
}

　　但产品详情的路由的定义要放到什么地方呢？由于产品详情要占据整个页面，它和 Events, Products 组件是一个级别的，所以要放到App组件中，在app.js文件中路由下面增加一条路由，<Route path=\'/details/:type\' component={Details}></Route>

<Switch>
          <Route path=\'/\' exact component={Home}/>
          <Route path=\'/about\' component={About}/>
          <Route path=\'/contact\' component={Contact}/>
          <Route path=\'/products\' component={Products}/>
          <Route path=\'/events\' component={Events}/>   
          <Route path=\'/details/:type\' component={Details}></Route>     
          <Route component={NotFound404}/>     
        </Switch>

　　现在可以实现动态路由了。

　　最后一点是重定向路由组件<Redirect>, 它最基本使用就是一个to 属性，和link的to 属性一个意思，到什么地方去。<Redirect to=’/about’>, 就是重定向到about组件。当在Switch 组件下面，它还有一个from属性，它的接受的参数和to 一样，是一个路径，表示从哪里来。在这里，假设用户在浏览器地址栏中输入history, 我们把它重定向about/history, 就可以这么写

<Redirect from=\'/history\' to=\'about/history\'></Redirect>

　　它还有一种使用场景就是，已有路径的重定向，比如，当用户访问首页的时候，把它重定向到产品页面。这里要知道的是，Route 组件的除了接受component，还可以接受一个render 函数，render函数渲染出一个组件。

<Route path=\'/\' exact render={() => <Redirect to=\'/products\' />} />

　　整个项目内容如下，就是在src目录下新建了 menus.js， pages.js, template.js，pages.css, menus.css 文件，修改了App.js 文件

　　App.js

import React from \'react\'
import { HashRouter, Route, Switch, Redirect } from \'react-router-dom\'

// 引入展示组件
import { About, Contact, Home, Products, Events, NotFound404, Details } from \'./pages\';

function App() {
  return (
    <HashRouter>
      <div>
        <Switch>
          <Route path=\'/\' exact component={Home}/>
          <Route path=\'/about\' component={About}/>
          <Route path=\'/contact\' component={Contact}/>
          <Route path=\'/products\' component={Products}/>
          <Route path=\'/events\' component={Events}/>  
          <Redirect from=\'/history\' to=\'about/history\'></Redirect>
          <Route path=\'/details/:type\' component={Details}></Route>     
          <Route component={NotFound404}/>     
        </Switch>     
      </div>
    </HashRouter>
  )
}

export default App

　　menus.js

import React from \'react\'
// 引入NavLink 组件
import { NavLink } from "react-router-dom";
import \'./menus.css\'

// 高亮的样式，表示我们在哪个导航下
const selectedStyle = {
  backgroundColor: \'white\',
  color: \'slategray\'
}

// navLink， activeStyle 点击高亮显示当前标签。
export const MainMenu = () => (
  <nav className=\'main-menu\'>
    <NavLink to=\'/\'>首页</NavLink>
    <NavLink to=\'/about\' activeStyle = {selectedStyle}>关于我们</NavLink>
    <NavLink to=\'/events\' activeStyle = {selectedStyle}>企业事件</NavLink>
    <NavLink to=\'/products\' activeStyle = {selectedStyle}>公司产品</NavLink>
    <NavLink to=\'/contact\' activeStyle = {selectedStyle}>联系我们</NavLink>
  </nav>
)

export const AboutMenu = () => (
  <ul className="about-menu">
    <li>
      <NavLink to=\'/about\' exact activeStyle ={selectedStyle}>公司简介</NavLink>
    </li>
    <li>
      <NavLink to=\'/about/history\' activeStyle ={selectedStyle}>公司历史</NavLink>
    </li>
    <li>
      <NavLink to=\'/about/services\' activeStyle ={selectedStyle}>公司服务</NavLink>
    </li>
    <li>
      <NavLink to=\'/about/location\' activeStyle ={selectedStyle}>企业位置</NavLink>
    </li>
  </ul>
)

　　pages.js

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

import \'./pages.css\';
import { Template } from "./template";
import { AboutMenu } from "./menus";
// 首页内容
export const Home = () => (
  <section className="home">
    <h1>企业网站</h1>
    <nav>
      {/* 添加了四个导航组件Link */}
      <Link to=\'/about\'>关于我们</Link>
      <Link to=\'/events\'>企业事件</Link>
      <Link to=\'/products\'>公司产品</Link>
      <Link to=\'/contact\'>联系我们</Link>
    </nav>
  </section>
)

// 企业事件内容
export const Events = () => (
  <Template>
    <section className="events">
      <h1>企业大事件</h1>
    </section>
  </Template>

)

// 公司产品 
export const Products = () => (
  <Template>
    <section className="products">
        <Link to=\'/details/telphone\'>手机</Link>
        &nbsp;
        <Link to=\'/details/computer\'>电脑</Link> 
    </section>
  </Template>
)

// 产品详情组件
export const Details = (props) => {
  console.log(props.match.params);
  return <p>这是 {props.match.params.type}详情内容</p>
}

// 联系我们
export const Contact = () => (
  <Template>
    <section className="contact">
      <h1>联系我们</h1>
      <p>公司电话：0755 - 12345678</p>
    </section>
  </Template>
)

// 关于我们
export const About = () => (
  <Template>
    <section className="about">
      <AboutMenu></AboutMenu>
      <Route path=\'/about\' exact component={Company}/>
      <Route path=\'/about/history\' component={History}/>
      <Route path=\'/about/services\' component={Services}/>
      <Route path=\'/about/location\' component={Location}/>
    </section>
  </Template>
)
// 没有匹配成功的404组件
export const NotFound404 = (props) => (
  <div className="whoops-404">
    <h1>没有页面可以匹配</h1>
  </div>
)

// 4个子路由对应的显示组件
const Services = () => (
  <section>
    <p>公司服务</p>
  </section>
)

const Location  = () => (
  <section>
    <p>公司位置</p>
  </section>
)

const Company = () => (
  <section>
    <p>公司简介</p>
  </section>
)

const History = () => (
  <section>
    <p>公司历史</p>
  </section>
)

　　template.js

import React from \'react\'
import { MainMenu } from "./menus";

export const Template = (props) => (
  <div className = \'page\'>
    <MainMenu></MainMenu>
    {props.children}
  </div>
)

　　menus.css

/* 页面左侧主要导航 */
.main-menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 20%;
  min-width: 20%;
  background-color: slategray;
  color: ghostwhite;
}

.main-menu  a {
  color: ghostwhite;
  text-align: center;
  padding: 1em;
  font-size: 1.5em;
}

.about-menu {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  background-color: slategray;
}

.about-menu > li {
  flex-grow: 1;
}

.about-menu > li > a {
  display: block;
  width: calc(100% - 1em);
  text-align: center;
  text-decoration: none;
  color: ghostwhite;
  padding: 0.5em;
}

　　pages.css

html, body, #root {
  height: 100%;
}
h1 {
  font-size: 3em;
  color: slategray;
}
/* home 组件 */
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home > nav {
  display: flex;
  justify-content: space-around;
  padding: 1em;
  width: calc(100% - 2em);
  border-top: dashed 0.5em ghostwhite;
  border-bottom: dashed 0.5em ghostwhite;
  background-color: slategray;
}

.home > nav a {
  font-size: 2em;
  color: ghostwhite;
  flex-basis: 200px;
}

/* 其它组件 */
section.events,
section.products,
section.contact {
  flex-grow: 1;
  margin: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 404页面 */
.whoops-404 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  justify-content: center;
  align-items: center;
  background-color: darkred;
  color: ghostwhite;
  font-size: 1.5em;
}

.page {
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding-top: 20px;
  background: #f3f7ff;
}
/* about 组件 */
.about {
  flex-grow: 1;
  margin: 1em;
  display: flex;
  flex-direction: column;
}
.about > section {
  text-align: center;
}

以上是关于React Router 4.0 ---- 嵌套路由和动态路由的主要内容，如果未能解决你的问题，请参考以下文章

React Router 4.0 ---- 嵌套路由和动态路由

React-router路由4.0版本用法

react-router 4.0、react-router-dom 和 react-router-redux 有啥区别？

React-router 4.0 history报错

react-router 4.0踩到的坑

react-router 4.0的初探