How to use map function with react router? - reactjs

Question

I have a list of pageNames and a list of pageUrls. I would like to create a router that generates a react component for each page in the list and uses a navbar with router links. I think the problem lies in the forEach function but I am not sure.
Can anyone tell what I am doing wrong?
Although I didn't find it helpful, here is a similar question.
import React, { useState } from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App() {
const routes = [
{
name: 'home',
path: '/'
},
{
name: 'blog',
path: '/blog'
}
]
// translate (map) your array of objects into jsx
const routeComponents = routes.map(({name, path}) => ((
<Route key={name} path={path}>
<h1>{name}</h1>
</Route>
)))
return (
<div className="App" >
<Router>
<Navbar routes = {routes} />
<Switch>
{routeComponents}
</Switch>
</Router>
</div>
);
}
export default App;
function Navbar(props){
const links = props.routes.map(({name, path}) => (
<Link key={name} to={path}>{name}</Link>
))
return(
<div style={{justifyContent: "space-around", margin:"auto", display:"flex",justifyContent:"space-around",backgroundColor:"red"}}>
{links}
</div>
)
}

Answer 1

The issue you likely are seeing is due to the way the Switch component works. It renders the first matching Route or Redirect component. This means that within the Switch component path order and specificity matters! The home path "/" matches any path, so will always be matched and rendered.
You can avoid this by reordering the routes from more specific to less specific, or since you allude to wanting the routes to be dynamically generated from user interaction and stored in a state, specify the exact prop for all routes so all matching occurs exactly and the order and specificity is negated.
function App() {
const routes = [
{
name: 'home',
path: '/',
},
{
name: 'blog',
path: '/blog',
},
];
const routeComponents = routes.map(({name, path}) => (
<Route key={name} exact path={path}> // <-- exact prop to exactly match paths
<h1>{name}</h1>
</Route>
));
return (
<div className="App" >
<Router>
<Navbar routes={routes} />
<Switch>
{routeComponents}
</Switch>
</Router>
</div>
);
}

Answer 2

You're correct. forEach is populating your routes variable, which is an array. What you want is to build some JSX. This is traditionally done via map. You also do not need the useState calls, and you'll want to combine your page names and urls into a single object for easier management.
Here's some pseudocode that will put you on the path...
const routes = [
{
name: 'hello',
path: '/'
},
{
name: 'there',
path: '/there'
}
]
// translate (map) your array of objects into jsx
const routeComponents = routes.map(({name, path}) => (
<Route key={name} path={path}/>
))
// routeComponents is JSX. You originally had an array of JSX
<Switch>
{routeComponents}
</Switch>
// Same thing for your links
const navbar = routes.map(({name, path}) => (
<Link key={name} to={path}>{name}</Link>
))
<div>
{navbar}
</div>
update
some tweaks in above example to clarify it.
Update #2
Here's full code (jammed into 1 file).
Updated to react router v6.
test it here
import "./styles.css";
import React, { useState } from "react";
import {
BrowserRouter as Router,
Routes,
Route,
Link,
Outlet
} from "react-router-dom";
function Navbar({ routes }) {
const links = routes.map(({ name, path }) => (
<Link key={name} to={path}>
{name}
</Link>
));
return (
<div
style={{
justifyContent: "space-around",
margin: "auto",
display: "flex",
justifyContent: "space-around",
backgroundColor: "red"
}}
>
{links}
</div>
);
}
export default function App() {
const routes = [
{
name: "home",
path: "/"
},
{
name: "blog",
path: "/blog"
},
{
name: "about",
path: "/about"
}
];
// translate (map) your array of objects into jsx
const routeComponents = routes.map(({ name, path }) => (
<Route key={name} path={path} element={<h1>{name}</h1>} />
));
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Router>
<Routes>{routeComponents}</Routes>
<Navbar routes={routes} />
</Router>
{Outlet}
</div>
);
}