why this code only render white screen in react router dom?

Question

I used nested routing using react-router-dom but the nested component only renders a white screen when go to the /taste url.

I'm using [email protected]

<App> -> <Tasts_Main> -> <Taste_taste-screen>

Answer 1

i usually use v6, but reading Docs of v5 you need to specify your history to navigate. I had to add my history to make this work, also using exact prop inside my Route and it works well

Try this in your App.js:

import {Route, Router} from "react-router";
import { createBrowserHistory } from "history";


function App() {
   const customHistory = createBrowserHistory();
   return (
      <Router history={customHistory}>
         <div>
          <Route exact path="/">
              <Home />
          </Route>
          <Route path="/login">
              <Login/>
          </Route>
      </div>
  </Router>

 );
}

Source: https://v5.reactrouter.com/web/api/Router/history-object