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?
Try this router structure:
<BrowserRouter>
<Routes>
<Route index element={<App />}/>
<Route path="products" element={<Products/>}/>
</Routes>
</BrowserRouter>
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.
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.