Question

我有一个Uploads.js包装器组件（位于/uploads端点），该组件根据路由将其内部的两个组件之一及其自身的元素呈现出来。

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
  Link
} from "react-router-dom 

import TabComponentOne from "./tabone.js";
import TabComponentTwo from "./tabtwo.js;
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";

class Uploads extends Component {



  handleCheckSave = () => {

    /*Perform some logic here*/

    let to = `${this.props.match.url}/tab1`;
    this.props.history.push(to);
  };

render() {
    return (
     <div>
       <div>In wrapper</div>

       <Router>
        <Switch>
           <Route  path={`${this.props.match.url}/tab1`}
                  render={props => (
                    <TabComponentOne {...props} tabID="tab1" />
                  )}/>
           <Route  path={`${this.props.match.url}/tab2`}
                  render={props => (
                    <TabComponentTwo {...props} tabID="tab2" />
                  )}/>



       </Switch>

     </Router>
     <button onClick={this.handleCheckSave}>Click me</button>
  </div>

    )
  }

//mapStateToProps...

}

export default withRouter(connect(mapStateToProps,null)(Uploads))

当我点击/uploads/tab2中带有“点击我”的按钮时，网址会更改为/uploads/tab1，但内容不会更改。

我已按照建议将Uploads包裹在withRouter内，但无济于事。

但是，奇怪的是，如果我尝试导航到不是/uploads子路由的任何地方，它会完美地工作！例如，将to="/welcome"设置为完美

React Redux程序化导航无法按预期工作

0 个答案: