url更改时反应路由器v4 history.push（）不起作用

Question

我正在使用 react-router v4，我可以得到“this.props.history”。但是，“this.props.history.push("/Anli/"+page)”（在 Anli.js ,函数changePage())在浏览器地址栏的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，你可以使用react-routersLink组件作为按钮吗？

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

查看这篇关于 react-router 的最新文章。

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

每当我在我的项目中实现路由更改时，我总是使用Link 组件，您可以将更改和动态路由直接传递到Link 组件的to 属性中。