Nothing shows up using react-router

user_19415235 0
Viewed 81

I am new to React, and I cannot get my routes to work. I am following the tutorial in the documentation but somehow it does not work. The content inside the App component does not show up so I assume there is some kind of problem with BrowserRouter or Routes or my nesting but I really cannot figure out what's going on.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from './App';
import Products from './routes/products';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />}>
                <Route path="products" element={<Products />} />
            </Route>
        </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

routes/app.js

import { Outlet, Link } from "react-router-dom";

export default function App() {
  return (
      <div>
        <h1>Hello World</h1>
        <nav>
            <Link to="/products">Products</Link>
        </nav>
        <Outlet />
      </div>
  );
}

routes/products.jsx

export default function Products(){
    return (
        <div>
            <h1>Products</h1>
        </div>
    );
}

P.S. I already saw some stackoverflow answers but still I could not see what I am getting wrong.

EDIT: Thank you for the attention and support but after rewriting the code and playing around with it I found out that my App component does not render when I add the Link to="" component. Any Idea why this is happening?

reactjs javascript
3 Answers

Try this router structure:

<BrowserRouter>
            <Routes>
                    <Route index element={<App />}/>
                    <Route path="products" element={<Products/>}/>
            </Routes>
        </BrowserRouter>
user_181005780

I have made only one change to your code, i.e. I use a wildcard to redirect the user to App for each route that does not match the other routes (i.e. each route that does not match /products). You can add a wildcard with * like this: <Route path="*" element={<App />} />

index.tsx

import { StrictMode } from "react";
import * as ReactDOMClient from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Products } from "./Products";

import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="*" element={<App />} />
        <Route path="products" element={<Products />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>
);

App.tsx

import "./styles.css";
import { Link } from "react-router-dom";

export default function App() {
  return (
    <>
      <Link to="/home">HOME</Link>
      <Link to="/products">PRODUCTS</Link>
      <div>HOME PAGE HERE</div>
    </>
  );
}

Products.tsx

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

export const Products = () => {
  return (
    <>
      <Link to="/home">HOME</Link>
      <Link to="/products">PRODUCTS</Link>
      <div>PRODUCTS PAGE HERE</div>
    </>
  );
};

You can checkout the example in codesandbox. Click on the links to navigate between the pages.

user_192300920

I am here answering my own question. After 2 days of madness I found out that I had two package.json files, so I just reinstalled locally react-router and eventually it worked. I came to this conclusion thanks to another answer here on StackOverflow.

user_194152350
Related