Проект разработки React + Dva + ant.design с нуля — роутинг

React.js Ant Design
Проект разработки React + Dva + ant.design с нуля — роутинг

предисловие

Я нашел ant.design от Ant Financial раньше, я чувствую, что этот фреймворк имеет полные спецификации взаимодействия с дизайном, богатую библиотеку компонентов, дружественное взаимодействие, высокое качество кода и хорошую стабильность, а потом я всегда хотел использовать этот фреймворк в проекте, но те кто раньше использовал VUE, не очень хорошо разбирается в React. Сегодня я научился использовать React и Dva.В процессе обучения я столкнулся со следующими проблемами, связанными с маршрутизацией:

  1. Как вкладывать маршруты
  2. Как настроить динамическую маршрутизацию
  3. Как асинхронно загружать страницы

Сегодня я здесь в основном для решения этих проблем, и я не буду говорить о соответствующих базовых знаниях.Если базовых знаний недостаточно, предлагаю вам перейти на https://github.com/dvajs/dva-knowledgemap для изучения минимальный набор соответствующих знаний. Это поможет каждому научиться использовать React + DVA для максимально быстрого выполнения проектов с минимальным объемом знаний.

Инициализация проекта

Следуйте инструкциям на официальном сайте ant (https://ant.design/docs/react/practical-projects-cn), чтобы создать проект.

  1. Установите строительные леса dva: npm install dva-cli -g
  2. Создайте новое приложение: dva new dva-demo
  3. Введите только что сгенерированное приложение: cd dva-demo
  4. Запустите приложение: npm start; через несколько секунд вы увидите страницу приветствия
  5. Настройте загрузку antd по запросу: npm install antd babel-plugin-import -D, измените файл .webpackrc в корневом каталоге и добавьте следующий код:
{
  "extraBabelPlugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
}
  1. Перезапустите проект: запуск npm

Вложенные маршруты

  1. Создайте родительскую страницу news.js в src/routes:
import React from 'react';
import { connect } from 'dva';

function News() {
  return (
    <div>我是新闻页面</div>
  );
}

export default connect()(News);
  1. Создайте подстраницу newsList.js в src/routes:
import React from 'react';
import { connect } from 'dva';

function NewsList() {
  return (
    <div>我是新闻列表页面</div>
  );
}

export default connect()(NewsList);
  1. Добавьте страницу новостей в src/router.js:
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import News from './routes/news';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/news" component={News} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;
  1. Измените страницу src/routes/news.js и добавьте объявление подстраницы на страницу новостей:
import React from 'react';
import { Route } from 'dva/router';
import { connect } from 'dva';
import NewsList from './newsList';

function News({match}) {
  return (
    <div>
      <span>我是新闻页面</span>
      <Route path={`${match.url}/list`} exact component={NewsList}></Route>
    </div>
  );
}

export default connect()(News);

На этот раз вы ввели в браузере: http://localhost:8000/#/news/list Вы можете увидеть:
я страница новостей
Я страница со списком новостей

динамическая маршрутизация

  1. Добавьте страницу newsDetail.js в src/routes:
import React from 'react';
import { connect } from 'dva';

function NewsDetail({match}) {
  return (
    <div>
      我是新闻详情页面{match.params.id}
    </div>
  );
}

export default connect()(NewsDetail);
  1. Измените страницу src/routes/news.js и добавьте объявление подстраницы на страницу новостей:
import React from 'react';
import { Route } from 'dva/router';
import { connect } from 'dva';
import NewsList from './newsList';
import newsDetail from './newsDetail';

function News({match}) {
  return (
    <div>
      <span>我是新闻页面</span>
      <Route path={`${match.url}/list`} exact component={NewsList}></Route>
      <Route path={`${match.url}/detail/:id`} exact component={newsDetail}></Route>
    </div>
  );
}

export default connect()(News);
  1. Посетите http://localhost:8000/#/news/detail/1 и вы увидите:
    я страница новостей
    Я новость подробности страница 1

Загружать страницы асинхронно

Функция асинхронной загрузки страниц в основном решается путем обращения к блогу: https://www.jianshu.com/p/dc867f5d28b1.Я здесь, чтобы помочь вам быстро решить проблемы.Если вас интересует конкретная реализация, вы можете пойти и увидеть эту статью.

  1. Сначала создайте новый класс инструмента asyncComponent.js в папке src/utils для асинхронной загрузки компонентов:
import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}
  1. Измените способ каждой импортированной страницы: в src/router.js
import IndexPage from './routes/IndexPage';
import News from './routes/news';

стали

import asyncComponent from './utils/asyncComponent.js';
const IndexPage = asyncComponent(() => import('./routes/IndexPage'));
const News = asyncComponent(() => import('./routes/news'));

src/routes/news.js:

import NewsList from './newsList';
import newsDetail from './newsDetail';

стали

import asyncComponent from '../utils/asyncComponent.js';
const NewsList = asyncComponent(() => import('./newsList'));
const newsDetail = asyncComponent(() => import('./newsDetail'));

Вы закончили, так что страница может быть загружена асинхронно Аналогично, наша страница на самом деле является компонентом React, поэтому этот метод также можно использовать для асинхронной загрузки других компонентов.

Справочная статья

Реализация вложенной маршрутизации React-Router 4.2: https://blog.csdn.net/arsiya_jerry/article/details/78122827
Асинхронная загрузка компонентов (разделение кода) для реактивного маршрутизатора 4.x: https://www.jianshu.com/p/dc867f5d28b1

Категории