React Router
273
export const Events = () =>
<PageTemplate>
<section className="events">
<h1>[Event Calendar]</h1>
</section>
</PageTemplate>
export const Products = () =>
<PageTemplate>
<section className="products">
<h1>[Product Catalog]</h1>
</section>
</PageTemplate>
export const Contact = () =>
<PageTemplate>
<section className="contact">
<h1>[Contact Us]</h1>
</section>
</PageTemplate>
export const About = ({ match }) =>
<PageTemplate>
<section className="about">
<h1>About</h1>
</section>
</PageTemplate>
如果用户运行该应用程序,将会发现每个段落显示的主菜单是一样的。当用户浏览网
站的内部页面时,屏幕右边的内容会随之发生变化。
子段落和子菜单
接下来,将会使用
Route
组件在
About
段落下嵌套
4
个组件(见图
11-5
)。
274
11
11
-
5
About段落下的子页面
我们需要为
Company
History
Services
Location
等栏目添加页面。当用户选择
About
段落时,系统默认会给用户显示该段落下的
Company
页面。大纲如下所示:
Home Page
About the Company
Company (default)
History
Services
Location
Events
Products
Contact Us
404 Error Page
我们需要创建的新路由将会以下列层级结构表示:
http://localhost:3000/
http://localhost:3000/#/
about
React Router
275
http://localhost:3000/#/
about
http://localhost:3000/#/
about/history
http://localhost:3000/#/
about/services
http://localhost:3000/#/
about/location
http://localhost:3000/#/events
http://localhost:3000/#/products
http://localhost:3000/#/contact
http://localhost:3000/#/foo-bar
让我们为
About
段落创建一个子菜单。将会使用
NavLink
组件,并会采用和
MainMenu
一样的
activeStyle
export const AboutMenu = (
{match}
) =>
<div className="about-menu">
<li>
<NavLink to="/about"
style={match.isExact && selectedStyle}>
[Company]
</NavLink>
</li>
<li>
<NavLink to="/about/history"
activeStyle={selectedStyle}>
[History]
</NavLink>
</li>
<li>
<NavLink to="/about/services"
activeStyle={selectedStyle}>
[Services]
</NavLink>
</li>
<li>
<NavLink to="/about/location"
activeStyle={selectedStyle}>
[Location]
</NavLink>
</li>
</div>
AboutMenu
组件使用
NavLink
组件引导用户浏览
About
段落下的内容。这个组件将会使
用一个
Route
渲染表示,这意味着它会接收路由属性。我们将会使用从
Route
发送到该
组件的
match
属性。
276
11
除了第一个之外,所有
NavLink
组件都会使用
activeStyle
属性。当路径和链接的路
由匹配时,
activeStyle
将会设置链接的样式属性。比如,当用户导航到
http://
localhost:3000/about/services
时,
Services
NavLink
将会渲染显示一个白色背景。
第一个
NavLink
组件并没有使用
activeStyle
。相反,只有当路由精确匹配
/about
时,
它的样式属性才会被设置为
selectedStyle
。当路径是
/about
时,
match.isExact
属性值是
true
,当路径是
/about/services
时,它的属性值是
false
。从技术上来说,
/about
路径和上述两个地址都匹配,不过只有路径
/about
时才是精确匹配。
占位符组件
我们还需要注意新增的段落使用了占位符组件:
Company
Services
History
Location
。它只是简单地显示了一些随机文字:
export const Services = () =>
<section className="services">
<h2>Our Services</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio.
Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
Nulla quis sem at nibh elementum imperdiet. Duis sagittis
ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa.
Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Curabitur sodales ligula in
libero.
</p>
<p>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque
nibh. Aenean quam. In scelerisque sem at dolor. Maecenas
mattis. Sed convallis tristique sem. Proin ut ligula vel
nunc egestas porttitor. Morbi lectus risus, iaculis vel,
suscipit quis, luctus non, massa. Fusce ac turpis quis
ligula lacinia aliquet. Mauris ipsum.
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
in, nibh. Quisque volutpat condimentum velit. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</section>
现在我们准备将路由添加到
About
组件:
export const About = ({ match }) =>
<PageTemplate>
<section className="about">
<Route component={AboutMenu} />
<Route exact path="/about" component={Company}/>
React Router
277
<Route path="/about/history" component={History}/>
<Route path="/about/services" component={Services}/>
<Route path="/about/location" component={Location}/>
</section>
</PageTemplate>
About
组件将会被各个段落复用。路径将会告知应用程序渲染哪个子段落。比如,当地
址为
http://local host:300/about/history
时,
About
组件内将会渲染显示
History
件。
这次我们并没有使用
Switch
组件。任意和地址匹配的路由都会渲染显示与之相关的组
件。第一个
Route
将会一直显示
AboutMenu
。此外,存在任何其他匹配的
Route
时,也
会显示它们的组件。
重定向
有时开发人员也许会希望将用户从一个路由重定向到另外一个。比如,我们可以确保
任何尝试通过
http://localhost:3000/services
访问页面的用户能够重定向到正确的
路由地址:
http://localhost:3000/about/services
让我们对程序稍作修改,添加重定向功能,以便确保用户可以访问正确的内容:
import {
HashRouter,
Route,
Switch,
Redirect
} from 'react-router-dom'
...
render(
<HashRouter>
<div className="main">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Redirect from="/history" to="/about/history" />
<Redirect from="/services" to="/about/services" />
<Redirect from="/location" to="/about/location" />
<Route path="/events" component={Events} />
<Route path="/products" component={Products} />
<Route path="/contact" component={Contact} />
<Route component={Whoops404} />
</Switch>
</div>
</HashRouter>,
document.getElementById('react-container')
)

Get React学习手册 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.