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

Question

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/> ?

The solution suggested in the answers to the question marked as a duplicate to this have already been attempted (as mentioned in the question). Which is why I asked this. Why was this marked as a duplicate? :( — , Aug 06 '18 at 18:22

Tholle · Accepted Answer · 2018-08-06T18:22:48.137

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>
    );
  }
}

@DhavalJardosh I'm not quite sure I understand what you are asking, sorry. Yes, the `Link` component [should get the `history` from context](https://github.com/ReactTraining/react-router/blob/13a855b71709645cb194ad083e8edc2161ce6e52/packages/react-router-dom/modules/Link.js#L25-L33). — Tholle, Aug 06 '18 at 18:10
I'm asking that `Link` is always wrapped inside a `Router`?. Because, I'm using a `Link` without `Router` as a wrapper and it's working. I was curious if that's not the best practice. BTW I will check the link you provided. Thank you. — Dhaval Jardosh, Aug 06 '18 at 18:14

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

1 Answers1

Linked