Until now the router was working perfectly fine but suddenly it isn't working. I'm totally confused and I haven't done any kind of upgrades.

The router doesn't render the components itself. I wonder if even the correct route gets rendered based on path.

Only the first route is working fine, the other two don't seem to work.

AssetPage.js

import React from "react";
import { Route } from "react-router-dom";
import AssetNavBar from "./AssetNavBar";
import "./assets.css";

function AssetPage() {
  return (
    <div className="top-div">
  <header>
    <AssetNavBar />
  </header>
  <main className="main-flex">
    <Route path="/assets/add" exact><h1>in main</h1></Route>
    <Route path="/assets/storage">
      <h1>in storage</h1>
    </Route>
      <Route path="/assets/view">
      <h1>in view</h1>
      </Route>
    </main>
   </div>
   );
 }

  export default AssetPage;

AssetNavBar.js

import React from "react";
import {Link} from 'react-router-dom';

 function AssetNavBar() {
  return (
   <div>
     <nav>
      <ul className="ul-side-by-side">
        <li>
        <Link to="/assets/add">add assets</Link>
      </li>
      <li>
        <Link to="/assets/view">view assets</Link>
      </li>
      <li>
        <Link to="/assets/storage">storage</Link>
      </li>
    </ul>
     </nav>
   </div>
 );
 }
 export default AssetNavBar;

index.js - [starting point]

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

App.js

import "./App.css";
import { Route } from "react-router-dom";
import SingleItem from "./components/inventory/SingleItem"
import HomeNavBar from "./components/HomeNavBar";
import InventoryPage from "./components/inventory/InventoryPage";
import ProductPage from "./components/products/ProductPage";
import PurchasePage from "./components/purchase/PurchasePage";
import SupplierPage from "./components/supplier/SupplierPage";
import AssetPage from "./components/assetFolder/AssetPage";

function App() {
  return (
    <div className='horizontal-div-boxes'>
      <header>
        <HomeNavBar/>
      </header>
      <main className="main-flex">
        <Route path="/dashboard">
          <SingleItem />
        </Route>
        <Route path='/inventory'>
          <InventoryPage/>
        </Route>
        <Route path='/purchase'>
          <PurchasePage/>
        </Route>
        <Route path='/products/add'>
          <ProductPage/>
        </Route>
        <Route path='/suppliers/add'>
         <SupplierPage/>
        </Route>
        <Route path='/assets/add'>
            <AssetPage/>
        </Route>
      </main>
    </div>
  );
}

export default App;

version

└─┬ [email protected]       
  └── [email protected]

CodePudding user response：

Issue

The AssetPage component is rendered on a "/assets/add" path and there are no other "/assets*" paths, so the other two links don't link to any routes that render content.

<Route path='/assets/add'>
  <AssetPage />
</Route>

In other words, when you link to "/assets/view" or "/assets/storage" the path no longer matches "/assets/add" and the AssetPage component is unmounted.

Solution

I am sure that you want this root route to be just "/assets" to allow further matching any "/assets*" paths.

<Route path='/assets'>
  <AssetPage />
</Route>