React-从0到1搭建一个React项目(二)

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

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

本篇是《从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。
具体的一些介绍,可以参考:

  1. https://github.com/ReactTraining/react-router/issues/4648
  2. https://stackoverflow.com/questions/42684809/react-router-vs-react-router-dom-when-to-use-one-or-the-other

路由配置

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

  1. 在项目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;
  1. 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();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值