React redux and React router,link change does not re render view [duplicate]

问题

I a few <Link/> elements and a few corresponding components that are rendered via the <Route/>

The components that are being rendered by <Route/> are redux connect-ed. On clicking the links,the url in the address bar changes but not the rendered component view. However,the proper view is rendered on refreshing.

Code for the container component(the one with the Routers and Links)

upload.js

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

import FileUpload1 from "./fileUpload1";
import FileUpload2 from "./fileUpload2";
import FileUpload3 from "./fileUpload3";

export default class Uploads extends Component {


  render() {
    return (
      <div>

        <div>
          <Link to={`${this.props.match.url}/p`}>Upload 1</Link>
        </div>
        <div>
          <Link to={`${this.props.match.url}/t`}>Upload 2</Link>
        </div>
        <div>
          <Link to={`${this.props.match.url}/e`}>Upload 3</Link>
        </div>


        <Router>
          <Switch>
            <Route
              path={`${this.props.match.url}/p`}
              render={props => (
                <FileUploadPassport {...props} tabID="1" />
              )}
            />
            <Route
              path={`${this.props.match.url}/t`}
              render={props => <FileUpload2 {...props} tabID="2" />}
            />
            <Route
              path={`${this.props.match.url}/e`}
              render={props => <FileUpload3 {...props} tabID="3" />}
            />
          </Switch>
        </Router>
      </div>
    );
  }
}

This is fileUpload1

import React, { Component } from "react";

import { withRouter } from "react-router-dom";

import { connect } from "react-redux";

class FileUpload1 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }



  componentWillMount() {
    console.log("Mounting");

  }

  componentDidMount() {
    console.log("mounted");
  }

  render() {
    return (
      <div>
        <h1>Hello</h1>
      </div>
    );
  }
}
const mapStateToProps = (state, ownProps) => ({

  test: state.initState.testStuff
});

export default withRouter(
  connect(mapStateToProps,null)(FileUpload1)
);

I have tried wrapping the fileupload1.js file's default export with withRouter but to no avail. How can I get the FileUpload1 component to render on clicking the corresponding <Link/> ?

回答1:

The Link components changes the history from the Router context, so you need to make sure the Link components are rendered inside your Router.

It's good practice to just have one BrowserRouter component at the top of your app.

export default class Uploads extends Component {
  render() {
    return (
      <Router>
        <div>
          <div>
            <Link to={`${this.props.match.url}/p`}>Upload 1</Link>
          </div>
          <div>
            <Link to={`${this.props.match.url}/t`}>Upload 2</Link>
          </div>
          <div>
            <Link to={`${this.props.match.url}/e`}>Upload 3</Link>
          </div>
          <Switch>
            <Route
              path={`${this.props.match.url}/p`}
              render={props => <FileUploadPassport {...props} tabID="1" />}
            />
            <Route
              path={`${this.props.match.url}/t`}
              render={props => <FileUpload2 {...props} tabID="2" />}
            />
            <Route
              path={`${this.props.match.url}/e`}
              render={props => <FileUpload3 {...props} tabID="3" />}
            />
          </Switch>
        </div>
      </Router>
    );
  }
}

来源：https://stackoverflow.com/questions/51713276/react-redux-and-react-router-link-change-does-not-re-render-view

标签

reactjs

redux

react-router

react-redux

react-router-v4