22、React中的路由管理与用户页面开发

React中的路由管理与用户页面开发

1. 路由参数设置

在路由中添加参数可以让我们根据不同的参数值展示不同的内容。以下是设置路由参数的具体步骤：
1. 打开 router.js 文件，添加新的路由：

<PrivateRoute path="/user/:username" component={props => <User {...props} changeLoginState={this.props.changeLoginState}/>} loggedIn={this.props.loggedIn}/>

这里的路径 /user/:username 中的 :username 是一个参数，React Router 会将其值传递给渲染的组件。

2. 导入 User 组件：

import User from './User';

2. 创建用户页面组件

在 Main.js 文件旁边创建 User.js 文件，内容如下：

import React, { Component } from 'react';
import User