React Router Dom NavLink and Link not Working

Question

I just cant get my NavLink or Link to work on my Project, the path changes but nothing gets rendered. I have no ideia what is going on!

Here is the main Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from "react-redux"
import App from './App';
import store from "./redux/store"
import './index.css'

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

App.js where I have my main routes that rotate between HOME component and a LOGIN component, in the end I use a catch all.

import './App.css';
import { Switch, Route, withRouter } from "react-router-dom"
import Home from './components/Home'
import Login from './components/Login'
import './App.css';
import Header from './components/Header';

function App() {
  return (
    <div className="overall-container">
      <Header/>
      <Switch>
        <Route exact path='/home' component={Home}/>
        <Route exact path='/Login' component={Login}/>
        <Route component={Login}/>
      </Switch>
    </div>
  );
}

export default withRouter(App);

Home.js where I have my switch and the routes

render() {
    return (
      <div className="homeContainer">
        <h1>TITLE</h1>
        <Switch>
          <Route
            exact path= '/home/admin'
            render={() => (
              <CreateDay
                user={this.props.user}
                users={this.props.users}
              />
            )}
          />
          <Route
            exact path= '/home/profile'
            render={() => (
              <Profile
                user={this.props.user}
                users={this.props.users}
              />
            )}
          />
          <Route
            exact path= '/home/'
            render={() => (
              <Schedule
                user={this.props.user}
                users={this.props.users}
                teeTimes={this.props.teeTimes}
              />
            )}
          />
          </Switch>
      </div>
    )
  }

and finally the Header where I have onn my NavLinks that are not working at all

render() {
    return(
      <div className='headerContainer'>
        <NavLink to="/home">
          <img src={home} alt='logo' className='homeButton'/>
        </NavLink>
        <NavLink to="/home/profile">
          <div className='profileHeaderContainer'>
              {this.props.user.url ?
                <img src={this.props.user.url} alt='logo' className='userImage'/>
                :
                <img src={userImage} alt='logo' className='userImage'/>
              }
            <div>
              <div className='profileHeaderName'>{this.props.user.userName} {this.props.user.lastName}</div>
            </div>
          </div>
        </NavLink>
        <img src={sair} alt='logo' className='sair' onClick={this.onSignOut}/>
      </div>
    )
  }

Answer 1

Issue

Specifying the exact prop on the root routes necessarily precludes them from matching any sub-routes.

<Switch>
  <Route exact path='/home' component={Home}/> // <-- only "/home" exactly
  <Route exact path='/Login' component={Login}/> // <-- only "/Login" exactly
  <Route component={Login}/>
</Switch>

Solution

Remove the exact prop so nested switches can match and render routes.

<Switch>
  <Route path='/home' component={Home}/>
  <Route path='/Login' component={Login}/>
  <Route component={Login}/>
</Switch>

You similarly don't need all the exact props on the nested routes. In fact, you generally don't, or won't, need to use the exact prop at all if you order your routes correctly in decreasing specificity so more specific paths are listed before less specific paths.