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

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

1. React路由设置

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 fro