React-从0到1搭建一个React项目（二）

最新推荐文章于 2025-08-27 21:02:26 发布

原创

最新推荐文章于 2025-08-27 21:02:26 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react #架构分享

本文是《从0到1搭建React项目》系列的第二篇，讲解了如何配置React路由、实现数据层（包括action、reduce和store）以及容器层组件的基本用法。文中介绍了react-router-dom的使用，数据层中Redux的action和reduce的定义，以及如何在容器组件中调用reduce方法和使用store数据。

文章目录

本篇是《从0到1搭建react项目》的第二篇，主要介绍react路由配置、数据层和容器层实现。
相关文章：React-从0到1搭建一个React项目（一）

react路由

react-router基本已成为react路由的标准解决方案。我使用的是react-router-dom。
react-router包含了所有react-router-dom和react-router-native的公共组件，实现了路由的核心功能。通常情况下，如果是开发web应用，使用react-router-dom就能满足需求。如果是用react-native开发，就用react-router-native。
具体的一些介绍，可以参考：

路由配置

路由的使用可以参考官方文档。也可以按下面的步骤来：

在项目src目录下新建一个routes.js文件，用来管理所有的路由。这里import了App组件，如果后续还有别的组件，import进来，增加一条Route即可

import React from 'react'
import { BrowserRouter as Router, Route } from "react-router-dom";
import App from './App'

const AppRouter = () => (
  <Router >
    <div>
      <Route path={ "/" } exact={ true } component={ App } />
    </div>
  </Router>
);

export default AppRouter;

在index.js文件中引入AppRouter

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import AppRouter from './routes'

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();