React Router - Why is the switch not changing html when the path changes?

Question

I am working on a web app, and i am having some issues with reactJS Router . When i redirect to the /sell path the HTML form the / path stays, and the HTML inside the /sell route doesn't load.

Am i doing something wrong? would anyone be able to point me towards the right direction?

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

import CreateList from "./CreateList";
//https://colorhunt.co/palette/33990
//https://colorhunt.co/palette/66990
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { appTitle: "better craigslist"};
    }

    render() {
        return (
            <React.Fragment>
                <Helmet>
                    <title>{this.state.appTitle}</title>
                </Helmet>
                <Router>
                    <Switch>
                        <Route path="/">
                            <div id="header-text">
                                <h1 className="center-align">
                                    <b>Sellify</b>
                                </h1>
                                <h5 className="center-align">
                                    Need to get rid of your stuff? create a listing and sell it here! <br /> Looking for something? Check if its on selify!
                                </h5>
                            </div>
                            <div className="col s12 center">
                                <Router>
                                    <Link to="/sell">
                                        <button className="btn" id="create-listing-button">
                                            Create Listing
                                        </button>
                                    </Link>
                                </Router>
                            </div>
                        </Route>
                        <Route path="/sell">
                            <h1>Test</h1>
                        </Route>
                    </Switch>
                </Router>
            </React.Fragment>
        );
    }
}


export default Home;

Thank you very much!

Answer 1

Issue

You've more than one Router . The inner Router context is handling the links so the outer Router isn't notified.

Solution

Use only one Router component, remove the Router around the Link . Additionally, when using a Switch , path order and specificity matter. You want to oder your more specific paths before less specific paths. "/" is a path prefix for all paths and would be matched and rendered before "/sell".

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { appTitle: "better craigslist" };
  }

  render() {
    return (
      <React.Fragment>
        <Helmet>
          <title>{this.state.appTitle}</title>
        </Helmet>
        <Router>
          <Switch>
            <Route path="/sell">
              <h1>Test</h1>
            </Route>
            <Route path="/">
              ...
              <div className="col s12 center">
                <Link to="/sell">
                  <button className="btn" id="create-listing-button">
                    Create Listing
                  </button>
                </Link>
              </div>
            </Route>
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}