React16+Router4 开发单页面应用-JavaScript中文网-JavaScript教程资源分享门户

介绍

React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它的设计目的是使代码更加可组合、可重用和易于维护。React 的核心思想是组件化，将界面分解成独立的部分，每个部分都有自己的状态和行为，这些部分可以组合在一起形成完整的用户界面。

React Router 是 React 中用于处理路由的库，它可以帮助我们构建单页面应用（SPA）。单页面应用是指只有一个 HTML 页面，但是在这个页面中可以通过 JavaScript 动态地加载不同的内容，从而实现不同的页面效果。React Router 的作用就是帮助我们在单页面应用中处理路由，使得用户能够在不同的页面之间进行切换。

在本文中，我们将介绍如何使用 React16 和 React Router4 来开发单页面应用。我们将从基础概念开始，逐步深入，直到能够开发出完整的单页面应用。

基础概念

组件

在 React 中，组件是构建用户界面的基本单位。每个组件都有自己的状态和行为，可以接收输入数据（称为 props）并渲染出对应的输出界面。组件可以嵌套在一起，形成复杂的界面结构。

下面是一个简单的 React 组件的例子：

// javascriptcn.com 代码示例
import React from 'react';

class Hello extends React.Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

export default Hello;

这个组件接收一个名字作为输入，输出一个包含名字的问候语。我们可以在其他组件中使用它，例如：

// javascriptcn.com 代码示例
import React from 'react';
import Hello from './Hello';

class App extends React.Component {
  render() {
    return <Hello name="Alice" />;
  }
}

export default App;

这个组件将会渲染出 Hello, Alice!。

JSX

在 React 中，我们使用 JSX 来描述组件的结构。JSX 是一种类似 HTML 的语法，但是它可以嵌入 JavaScript 代码，使得我们可以在组件中编写逻辑。

下面是一个使用 JSX 的例子：

// javascriptcn.com 代码示例
import React from 'react';

class Hello extends React.Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

export default Hello;

在这个例子中，我们使用了类似 HTML 的标签来描述组件的结构，但是我们可以在标签中嵌入 JavaScript 代码，例如 {this.props.name} 就是一个 JavaScript 表达式，它会被动态地计算出来并渲染到组件中。

路由

在单页面应用中，我们需要使用路由来处理不同的页面效果。React Router 是 React 中用于处理路由的库，它可以帮助我们实现单页面应用中的路由功能。

React Router 4 中的路由使用 Route 组件来定义。Route 组件可以接收以下几个属性：

path：表示路由的路径，例如 /home。
component：表示路由对应的组件，例如 Home。
exact：表示是否精确匹配路径，例如 /home 和 /home/ 是否匹配。

下面是一个简单的使用 React Router 的例子：

// javascriptcn.com 代码示例
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

class Home extends React.Component {
  render() {
    return <div>This is Home page.</div>;
  }
}

class About extends React.Component {
  render() {
    return <div>This is About page.</div>;
  }
}

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>

          <hr />

          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    );
  }
}

export default App;

在这个例子中，我们使用了 BrowserRouter 来作为路由的容器，使用 Link 来定义路由链接。当用户点击链接时，React Router 会自动渲染对应的组件。在这个例子中，我们定义了两个路由，一个是 /，对应的组件是 Home；另一个是 /about，对应的组件是 About。

开发单页面应用

安装依赖

在开始开发单页面应用之前，我们需要安装 React、React Router 和 Webpack 等依赖。可以使用以下命令来安装：

npm install react react-dom react-router-dom webpack webpack-dev-server babel-core babel-loader babel-preset-env babel-preset-react --save-dev

配置 Webpack

在安装完依赖之后，我们需要配置 Webpack 来处理 React 和 React Router 的代码。可以使用以下的 Webpack 配置：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react'],
          },
        },
      },
    ],
  },
};

这个配置文件定义了入口文件为 src/index.js，输出文件为 dist/bundle.js。同时还定义了 Webpack Dev Server 的配置，可以在开发过程中自动更新页面。最后，我们还需要使用 babel-loader 来处理 React 和 React Router 的代码，以便将它们转换成浏览器可以识别的代码。

定义路由

在开始编写组件之前，我们需要先定义好路由。这里我们定义了三个路由，分别对应三个页面：首页、用户列表页和用户详情页。我们将它们定义在 src/routes.js 文件中：

// javascriptcn.com 代码示例
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './components/Home';
import UserList from './components/UserList';
import UserDetail from './components/UserDetail';

const Routes = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/users" component={UserList} />
    <Route path="/users/:id" component={UserDetail} />
  </Switch>
);

export default Routes;

在这个文件中，我们使用了 Switch 组件来包含所有的 Route 组件。Switch 组件的作用是只渲染第一个匹配到的路由，这样可以避免多个路由同时匹配的问题。我们还定义了三个路由，它们分别对应三个组件：Home、UserList 和 UserDetail。其中 UserDetail 还使用了动态路由来匹配用户的 ID。

编写组件

在定义好路由之后，我们可以开始编写组件了。这里我们定义了三个组件，分别对应三个页面：首页、用户列表页和用户详情页。我们将它们分别定义在 src/components/Home.js、src/components/UserList.js 和 src/components/UserDetail.js 文件中。

Home 组件

// javascriptcn.com 代码示例
import React from 'react';

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome to my website!</h1>
        <p>This is the home page.</p>
      </div>
    );
  }
}

export default Home;

Home 组件是一个简单的欢迎页面，它包含一个标题和一段文字。

UserList 组件

// javascriptcn.com 代码示例
import React from 'react';
import { Link } from 'react-router-dom';

class UserList extends React.Component {
  state = {
    users: [],
  };

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(users => {
        this.setState({ users });
      });
  }

  render() {
    const { users } = this.state;

    return (
      <div>
        <h1>User List</h1>
        <ul>
          {users.map(user => (
            <li key={user.id}>
              <Link to={`/users/${user.id}`}>{user.name}</Link>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default UserList;

UserList 组件是一个用户列表页面，它会从一个 API 中获取用户列表并显示出来。在渲染用户列表时，我们使用了 Link 组件来定义用户详情页的链接。

UserDetail 组件

// javascriptcn.com 代码示例
import React from 'react';

class UserDetail extends React.Component {
  state = {
    user: null,
  };

  componentDidMount() {
    const { match } = this.props;
    const { id } = match.params;

    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then(res => res.json())
      .then(user => {
        this.setState({ user });
      });
  }

  render() {
    const { user } = this.state;

    if (!user) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        <h1>{user.name}</h1>
        <p>Email: {user.email}</p>
        <p>Phone: {user.phone}</p>
      </div>
    );
  }
}

export default UserDetail;

UserDetail 组件是一个用户详情页面，它会从一个 API 中获取用户的详细信息并显示出来。在获取用户信息时，我们使用了动态路由来匹配用户的 ID。

渲染应用

在定义好路由和组件之后，我们可以开始渲染应用了。我们将渲染代码放在 src/index.js 文件中：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import Routes from './routes';

ReactDOM.render(
  <Router>
    <Routes />
  </Router>,
  document.getElementById('root')
);

在这个文件中，我们使用了 BrowserRouter 来作为路由的容器，使用 Routes 组件来定义所有的路由。最后，我们使用 ReactDOM.render 方法将应用渲染到页面中。

运行应用

在完成了上述步骤之后，我们可以使用以下命令来运行应用：

npm run start

这个命令会启动 Webpack Dev Server，使得我们可以在浏览器中访问应用。例如，我们可以访问 http://localhost:9000/ 来查看首页，访问 http://localhost:9000/users 来查看用户列表页面，访问 http://localhost:9000/users/1 来查看用户详情页面。

总结

在本文中，我们介绍了如何使用 React16 和 React Router4 来开发单页面应用。我们从基础概念开始，逐步深入，直到能够开发出完整的单页面应用。希望本文能够对您有所帮助，如果您有任何问题或建议，请在评论区留言。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6553236fd2f5e1655dcd4d55