React学习手册

React Router

｜

271

嵌套路由

Route

组件可以用于匹配特定

URL

地址后才显示相关内容。这个特性允许用户将

Web

应用组织成一定的层级结构，从而有利于内容复用。

在本节中，我们还将介绍如何将内容组织成包含子菜单的子段落。

使用页面模版

有时，用户在应用程序中导航时，我们希望某些用户界面能够保持不变。以前的解决

方案包括页面模版和母版页来帮助开发人员复用

UI

元素。

React

组件天生就可以使用

子属性合成模版。

让我们看看这个简单的入门网站。一旦打开页面，每个段落都应该显示相同的主菜

单。屏幕右侧的内容应该随着用户浏览不同页面段落而变化，但是屏幕左侧的内容应

该保持不变（见图

11-4

）。

让我们创建一个可复用的

PageTemplate

组件，以便可以将之作为这些内部页面的模

版。该组件将会一直显示主菜单，但是将会根据用户浏览网站不同页面段落而渲染嵌

套的内容。

首先，我们需要构造

MainMenu

组件：

import HomeIcon from 'react-icons/lib/fa/home'

import { NavLink } from 'react-router-dom'

import './stylesheets/menus.scss'

const selectedStyle = {

backgroundColor: "white",

color: "slategray"

}

export const MainMenu = () =>

<nav className="main-menu"> ...