8、React开发：路由、组件与认证的实现

React开发：路由、组件与认证的实现

1. React Router设置

1.1 前置检查与项目初始化

在React应用中设置路由前，可进行自我检查以巩固技能：
1. 使用Create React App在新的项目目录中启动一个新的React应用。
2. 添加两个功能组件 Home 和 Contact ，它们只需显示一个包含组件名称的 <h2> 元素。
3. 按照官方快速入门指南将 react-router-dom 添加到应用中。

1.2 代码重构

在添加路由器之前，将 App 组件从 index.js 移到 App.jsx 以清理代码。以下是 App.jsx 和 index.js 的更新内容：

App.jsx

import React, { Component } from 'react';
import axios from 'axios';
import UsersList from './components/UsersList';
import AddUser from './components/AddUser';

class App extends Component {
  constructor() {
    super()