I have this kind of Router and what I found as a side effect is that when I'm for example in some localhost:3000/tododetails/some_id and I click the link for example: Notes Form, it doesn't direct me to localhost:3000/notesform but it does direct to localhost:3000/tododetails/notesform which is obviously not defined. How am I able to edit it to work correctly? Tried to make an absolute path inside Link, like this: localhost:3000/notesform, but as result it is localhost:3000/tododetails/localhost:3000/notesform which is even worse than before.

My router:

<BrowserRouter>
          <ul>
              <li><Link to="todolist">Todo List</Link></li>
              <li><Link to="todoform">Todo Form</Link></li>
              <li><Link to="noteslist">Notes List</Link></li>
              <li><Link to="notesform">Notes Form</Link></li>
          </ul>

          <Route exact path="/todolist" component={TodoList} />
          <Route exact path="/todoform" component={TodoForm} />
          <Route exact path="/todoform/:id" component={TodoForm} />
          <Route exact path="/tododetails/:id" component={TodoDetails} />

          <Route exact path="/noteslist" component={NotesList} />
          <Route exact path="/notesform" component={NotesForm} />
          <Route exact path="/notesform/:id" component={NotesForm} />
          <Route exact path="/notesdetails/:id" component={NotesDetails} />
      </BrowserRouter>