12、React路由导航与服务器端渲染全解析

React路由导航与服务器端渲染全解析

1. React路由导航

在React应用中，路由的主要任务是根据URL渲染对应的内容， react-router 包是实现这一任务的标准工具。

1.1 路由链接与参数处理

<Link> 组件的 to 属性用于指定点击时要激活的路由。例如，应用中有 /first 和 /second 两条路由。构建传递给 <Link> 的路径动态段很简单，只需进行字符串操作，路径的所有部分都放在 to 属性中。而 <Link> 的 query 属性接受一个查询参数映射，并会为你构建查询字符串。

下面是一个简单的组件，它会回显传递给 echo URL段或 echo 查询参数的内容：

import React from 'react';
// 简单组件，期望一个 "echo" URL段参数或一个 "echo" 查询参数。
export default ({
  params,
  location: {
    query,
  },
}) => (
  <h1>{params.echo || query.echo}</h1>
);