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

最新推荐文章于 2024-10-13 19:02:06 发布

圆月弯刀丶

最新推荐文章于 2024-10-13 19:02:06 发布

阅读量1.9k

点赞数 1

分类专栏： Web前端文章标签： React Router

原文链接：https://www.cnblogs.com/SamWeb/p/8932931.html

版权

Web前端专栏收录该内容

42 篇文章 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;
}

复制代码