react-router-dom Link not working

Question

I moved from react-router to react-router-dom and fixed all the errors. But, now on clicking the links, url is changing but respective view is not rendering.

Here is structure of my application:

index.js

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <HashRouter>
        <App>
            <Switch>
                    <Route path="signin" component={Signin} />
                    <Route path="about" component={About} />
                    <Route path="signout" component={Signout} />
                    <Route path="signup" component={Signup} />
                    <Route path="thanks" component={Thanks} />
                    <Route path="tasks" component={ requireAuth(Task)  }/>
                    <Route path="/" component={ Content }/>

            </Switch>
        </App>
    </HashRouter>
  </Provider>
  , document.querySelector('.container'));

app.js

class App extends Component {
    render() {
        return (
            <div>
                <Header/>
                    {this.props.children}
                <Footer/>               
            </div>
        );
    }
}

export default withRouter(App);

header.js

class Header extends Component {

    showLoginButton() {
        if (this.props.authenticated) {
          // show a link to sign out
          return [<span className="loginBtn">
                    <Link to="/signout">Sign Out</Link>
                    </span>,
                <span className="loginBtn">
                    <Link to="/tasks">Tasks</Link>
                </span>
          ]
        } else {
          // show a link to sign in or sign up
          return [
            <span className="loginBtn" key={1}>
              <Link className="nav-link" to="/signin">Sign In</Link>
            </span>,
            <span className="loginBtn" key={2}>
              <Link className="nav-link" to="/signup">Sign Up</Link>
            </span>,
            <span className="loginBtn" key={3}>
                  <Link className="nav-link" to="/about">About</Link>
              </span>
          ];
        }
    }

    render() {
        return (
            <div className="header">
                <span className="logo">
                    <Link to="/" className="navbar-brand">company</Link>
                </span>
                {this.showLoginButton()}
            </div>
        );
    }
}

function mapStateToProps(state) {
  return {
    authenticated: state.auth.authenticated
  };
}

export default withRouter(connect(mapStateToProps)(Header));

I tried withRouter as mentioned in post https://stackoverflow.com/a/43811162/888181, but still it's not working!

Answer 1

Try to move root path to the top and make sure you put exact in front of path. Also, you should put / for other paths.

<Switch>
    <Route exact path="/" component={ Content }/>
    <Route path="/signin" component={Signin} />
    <Route path="/about" component={About} />
    <Route path="/signout" component={Signout} />
    <Route path="/signup" component={Signup} />
    <Route path="/thanks" component={Thanks} />
    <Route path="/tasks" component={ requireAuth(Task)  }/>
</Switch>

reference: https://reacttraining.com/react-router/web/api/Switch

Answer 2

import {NavLink} from 'react-router-dom';

use NavLink component instread of a tag, for me it's working