реагирует роутер v4 history.push () не работает при изменении URL

Question

Я использую response-router v4, и я могу получить "this.props.history". Однако "this.props.history.push (" / Anli / "+ page)" (в Anli.js Функция funPage ()) не работает, когда URL в адресной строке браузера изменился.

Но «this.prop.history.push (" / home ")» сработало. Я не знаю почему.

Спасибо за помощь.

index.js

import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';
import React from 'react';
import Anli from '../views/anli/Anli';

class RouterIndex extends React.Component{
    render(){
        return(
            <Router>
                <Switch>
                <Route path="/home" exact component={Home}></Route>

                    <Route path="/AnLi/:page" render={props => <Anli {...props}/>}></Route>
                    <Redirect from="/*" to="/home" />
                </Switch>
            </Router>
        );
    }
}

App.js

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { createStore } from 'redux'
import { Provider } from "react-redux";
import RouterIndex from './router';
import reducer from './reducer/reducer';

const store = createStore(reducer);

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <RouterIndex/>
      </Provider>
    );
  }
}

Anli.js

import React from 'react'
import TopNavbar from '../../components/navbar/TopNavbar';
import SuspendBar from '../../components/suspendBar/SuspendBar';
import ajaxhost from '../../ajaxhost';
import SubCards from '../../components/subPageCard/SubCards';
import {Pagination} from "antd";
import { withRouter,Link } from "react-router-dom";
import "./anli.css"
import Footer_ from '../../components/footer/Footer_';



class Anli extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      datas: [],
      pages:{}
    }
    this.changePage = this.changePage.bind(this);
  }

  componentDidMount() {
    let page = this.props.match.params.page;
    let url_;
    if (page === 1) {
      url_ = this.state.url
    }else{
      url_ = this.state.url + suffix + page
    }
    let url = encodeURIComponent(url_).replace(new RegExp("%", "g"), '~');
    let that = this;
    fetch(ajaxhost +'/search/hunlicehua/'+ url, {
      method: 'GET'
    }).then((res) => {
      if (res.ok) {
        res.json().then(function (result) {
          debug && console.log(result);
          that.setState({
            datas:result.datas,
            pages:result.pages
          })
        })
      }
    }).catch((res) => {
      console.log(res);
    })
  }

  changePage(page){

    console.log(this.props.history);
    this.props.history.push("/AnLi/"+ page);

  }
  render() {
    const {datas,pages} = this.state;

    const current = parseInt(this.props.match.params.page);
    const total = parseInt(pages.list[pages.list.length - 1].num);
    return (
      <div history={this.props.history}>
       <TopNavbar/>
       <SuspendBar/>

       <SubCards datas={datas}/>
       <div className="pagination-custom" >
          <Pagination defaultCurrent={current} total={total} onChange={this.changePage}/>
       </div>

      <Footer_ />
      </div>
    );
  }
}

Answer 1

Первая попытка:

внутри:

changePage(page){
  console.log(this.props.history);
  this.props.history.push("/AnLi/"+ page);
}

убедитесь, что вы передаете строку (в качестве параметра), а не целое число, а затем объединяете строку вместе, или вы можете просто запустить page.toString()

вторая попытка:

Вместо того, чтобы абстрагировать событие onClick и запустить history.push, можете ли вы использовать реагирующие маршрутизаторы Link Компонент для кнопки?

            <Link to={`/topics/${id}`}>{name}</Link>

посмотрите эту самую последнюю статью о реагирующем маршрутизаторе.

https://tylermcginnis.com/react-router-nested-routes/

Всякий раз, когда я внедряю изменения маршрутов в своих проектах, я всегда использую Link Компонент, вы можете передавать изменяющиеся и динамические маршруты непосредственно в to пропеллер Link Компонента.