Как добавить номер страницы в URL

Question

Может кто-нибудь сказать, пожалуйста, как я могу добавить номер страницы в мой URL. Компонент выглядит следующим образом:

/** NPM Packages */
import React, { Component } from "react";
import { connect } from "react-redux";
import { Spinner, Pagination } from "react-bootstrap";
//import styles from "./App.module.css";

/** Custom Packages */
import List from "../List";
//import fetchCategories from "../../../actions/configuration/category/fetchCategories";
import deleteCategory from "../../../actions/configuration/category/deleteCategory";
import API from "../../../../app/pages/utils/api";

class Category extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mesg: "",
      mesgType: "",
      isLoading: true,
      total: null,
      per_page: null,
      current_page: 1,
      pdata: []
    };
    this.fetchCategoriesAPI = this.fetchCategoriesAPI.bind(this);
  }

  fetchCategoriesAPI = async pno => {
    await API.get("categories?offset=" + (pno.index+1))
      .then(res => this.setState({ pdata: res.data }))
      .then(() => this.props.passToRedux(this.state.pdata))
      .catch(err => console.log(err));
      };

  componentDidMount = async () => {
    const { state } = this.props.location;
    if (state && state.mesg) {
      this.setState({
        mesg: this.props.location.state.mesg,
        mesgType: this.props.location.state.mesgType
      });
      const stateCopy = { ...state };
      delete stateCopy.mesg;
      this.props.history.replace({ state: stateCopy });
    }

    this.closeMesg();
    await this.fetchCategoriesAPI(1);
    this.setState({ isLoading: false });
  };

  onDelete = async id => {
    this.props.removeCategory(id);
    await deleteCategory(id).then(data =>
      this.setState({ mesg: data.msg, mesgType: "success" })
    );
    this.closeMesg();
  };

  closeMesg = () =>
    setTimeout(
      function() {
        this.setState({ mesg: "", mesgType: "" });
      }.bind(this),
      10000
    );

  /** Rendering the Template */
  render() {
    let activePage = this.state.pdata.currPage;
    let items = [];
    let totalPages = Math.ceil(this.state.pdata.totalCount / 10);
    for (let number = 1; number <= totalPages; number++) {
      items.push(
        <Pagination.Item key={number} active={number == activePage}>
          {number}
        </Pagination.Item>
      );
    }

    const paginationBasic = (
      <div>
        <Pagination>
          {items.map((item,index)=>{
            return <p key={index} onClick={() => this.fetchCategoriesAPI({index})}>{item}</p>
          })}
        </Pagination>
        <br />
      </div>
    );

    const { mesg, mesgType, isLoading } = this.state;

    return (
      <>
        {mesg ? (
          <div
            className={"alert alert-" + mesgType + " text-white mb-3"}
            role="alert"
          >
            {mesg}
          </div>
        ) : (
          ""
        )}
        {isLoading ? (
          <div className="container-fluid">
            <h4
              className="panel-body"
              style={{ "text-align": "center", margin: "auto" }}
            >
              Loading&nbsp;
              <Spinner animation="border" role="status" />
            </h4>
          </div>
        ) : (
          <div>
            <List
              listData={this.props.categories}
              listName="category"
              _handleDelete={this.onDelete.bind(this)}
            />
            {paginationBasic}
          </div>
        )}
      </>
    );
  }
}

const matchStatestoProps = state => {
  return { categories: state.categories };
};

const dispatchStatestoProps = dispatch => {
  return {
    passToRedux: pload =>
      dispatch({ type: "FETCH_CATEGORIES", payload: pload }),
    removeCategory: id => dispatch({ type: "DELETE_CATEGORY", payload: id })
  };
};

export default connect(matchStatestoProps, dispatchStatestoProps)(Category);

маршрут выглядит следующим образом:

 <Route exact path="/categories/:page?" component={Category} />

Поэтому в основном я хочу, чтобы номер страницы отображался в URL. Также, если я изменю номер страницы, данные должны загрузить соответствующую страницу. Пожалуйста, помогите мне

Может кто-нибудь, пожалуйста, помогите мне?

Answer 1

В компоненте класса:

Ваш маршрутизатор будет передавать match в качестве реквизита. Когда ваш компонент монтируется, получите this.props.match.params.page и соответственно загрузите данные:

class MyComponent extends React.Component {
  componentDidMount () {
    // get the 'page' param out of the router props.
    // default to 0 if not specified.
    const { page  = 0 } = this.props.match.params;

    // it comes in as a string, parse to int
    const p = parseInt(page, 10);

    // do whatever you need to do (load data, etc.)
  }
}

В компоненте функции:

В компоненте функции вы можете получить параметр страницы через реакции-маршрутизатора useParams hook :

import { useParams } from 'react-router-dom';

function MyComponent () {
  const { page } = useParams(); // get the 'page' router param
  const p = parseInt(page, 10); // comes in as a string, convert to int

  // do whatever you need to do with it
}

Если вам нужна предыдущая / следующая навигация, вы можете определить эти номера страниц на текущей странице.

Я сделал этот быстрый пример , который демонстрирует, как получить доступ и использовать параметры URL-адреса маршрута через перехватчик useParams маршрутизатора реагирования и как это сделать с помощью match prop с компонентом класса.

Answer 2

Вы можете получить номер страницы из реквизита, как это:

const matchStatestoProps = (state, ownProps) => {
  return { id: ownProps.match.params.id; categories: state.categories };
};

В ваших маршрутах:

<Route path="/page/:id" component={Page} />