【React全家桶入门之三】基本的用户添加

最新推荐文章于 2025-03-03 17:12:55 发布

一韬

最新推荐文章于 2025-03-03 17:12:55 发布

阅读量2.2w

点赞数 13

分类专栏： react React全家桶入门 React全家桶入门文章标签： react react路由

本文链接：https://blog.youkuaiyun.com/awaw00/article/details/54706052

版权

本文介绍了如何在React项目中添加一个用于用户添加的新页面，包括配置路由、编写页面逻辑、获取表单值以及调用接口创建用户。通过React Router控制页面渲染，使用Link组件处理页面跳转，利用fetch进行API交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新增页面

我们现在的应用只有一个Hello React的页面，现在需要添加一个用于添加用户的页面。

首先在/src目录下新增一个pages目录，用于存放渲染页面的组件。

然后在/src/pages中新增一个UserAdd.js文件。

Tips: 关于文件的命名，我采用这样的方式：[模块][功能].xxx，上面是一个添加用户的页面，所以模块是User，功能是Add，良好的命名风格可以让你的项目、代码更容易维护（这里由于是React的一个组件，所以使用大写开头的大驼峰命名法）。

在这个文件中写入一个基本的React组件：

import React from 'react';

class UserAdd extends React.Component {
  render () {
    return (
      <div>User add page.</div>
    );
  }
}

export default UserAdd;

配置路由

我们需要使用react-router提供的路由组件来控制当前路由下页面应该渲染的组件。

修改/src/index.js为：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory } from 'react-router';
import UserAddPage from './pages/UserAdd';

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/user/add" component={UserAddPage}/>
  </Router>
), document.getElementById('app'));

打开浏览器的http://localhost:8000发现页面一片空白，在控制台中可以看到一个错误信息：

这是因为我们只配了一个/user/add的路由，我们来访问一下http://localhost:8000/#/user/add看看

新页面出来了。现在需要把上面的那个错误干掉：新建一个主页，并在主页中添加一个链接链到添加用户的页面。

还是在/src/pages/中新建一个Home.js，写入代码：

import React from 'react';
import { Link } from 'react-router';

class Home extends React.Component {
  render () {
    return (
      <div>
        <header>
          <h1>Welcome</h1>
        </header>

        <main>
          <Link to="/user/add">添加用户<

最低0.47元/天解锁文章