React-router is not displaying component in the browser-CodePudding

Inside App.js:

import React, { useState } from 'react';
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Dashboard from './components/Dashboard/Dashboard';
import Preferences from './components/Preferences/Preferences';
import Login from './components/Login/Login';

function App() {
  const [token, setToken] = useState();

if(!token) {
return <Login setToken={setToken} />
}

return (
<div className="wrapper">
  <h1>Application</h1>
  <BrowserRouter>
    <Routes>
      /*<Route path="/dashboard">*/
      <Route path="/dashboard" element={<Dashboard/>} /></Route>
      /*<Route path="/preferences">*/
      <Route path="/preferences" element={<Preferences/>} /></Route>
    </Routes>
  </BrowserRouter>
</div>
);
}

export default App;`

Inside Dashboard.js (../src/components/Dashboard/Dashboard.js):

import React from 'react';

export default function Dashboard() {
  return(
  <h2>Dashboard</h2>
  );
 }

Url: http://localhost:3000/dashboard

I want to see the Dashboard content along with the App page content (Application and Dashboard headers) when I load the browser. But when I load the browser, it only displays the App page content and getting the same error:

   "Matched leaf route at location "/dashboard" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page."

CodePudding user response：

You are using Routes instead of Router. Replace it on your line 3 and in the return().

Source: React-router https://v5.reactrouter.com/web/api/Route

//...
import { BrowserRouter, Route, Router } from 'react-router-dom'; 
//...
    
    return ( ...
        <Router>
          /*<Route path="/dashboard">*/
          <Route path="/dashboard" element={<Dashboard/>} />
          /*<Route path="/preferences">*/
          <Route path="/preferences" element={<Preferences/>} />
        </Router>
    ...)

    
export default App;

CodePudding user response：

Please specify which version of React router you are using, since a lot of the functionality has changed, is it 6.4 or is still 5 ?

Either way, please remove the comments of the routes, I don't think they help at all.

if you have chosen BrowserRouter from the 6.4 version then it should be used like this

    import { BrowserRouter, Route } from 'react-router-dom'; 
        
        return (
            <BrowserRouter>
              <Route path="/" element={<RootComp />} >
                <Route path="dashboard" element={<Dashboard/>} />
                <Route path="preferences" element={<Preferences/>} />
              </Route>
            </BrowserRouter>
        )
    
        
    export default App;

Where <RootComp /> should have an <Outlet /> as children

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

    const RootComp = () => { 
     return <div><Outlet /></div>
    }
        
    export default RootComp;

Again, this is for the latest React Router component, however, I would advise using createBrowserRouter() rather than the old component-based trees, this way you can programatically create and manage the routes in an Object.