We Keep Coding

Dynamic routing will not display component

I am using react-router-dom v6, "react": "^18.2.0", and not able to render a Details component. This is my routing:
function Routing() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<List />} />
<Route path="details/:id" element={<Details />} />
<Route path="other" element={<Other />} />
</Routes>
</BrowserRouter>
);
}
I am using this to try to access the Details component:
<Link to={'details' + `/${props.id}`}/>
The details component is as basic as this:
import react from 'React'
const Details = () => {
return (<h1>HELLO</h1>)
}
export default Details;
But the component will not render, and I am getting the warning "No routes matched location "/details/weI4qFO9/UW9v5WFllYhFw==""
It's only dynamic routing that will not render the component. Any idea what I am doing wrong or missing?

you are missing the / before details on the router and the link
function Routing() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<List />} />
<Route path="/details/:id" element={<Details />} />
<Route path="/other" element={<Other />} />
</Routes>
</BrowserRouter>
);
}
<Link to={`/details/${props.id}`}/>

React router v6, group routes by feature

I am using React router v6.
THE PROBLEM:
my App.tsx is very big as it includes routes for all of the application:
Ex.
...
<Route path="products/" element={<ProductsList />} />
<Route path="products/:slug" element={<ProductView />} />
... about 300 lines
I would like to group these routes by feature so that I end up having something like this:
...
<Route path="admin" element={<AdminRoutes />} />
<Route path="products" element={<ProductsRoute />} />
...
it would look cleaner and easier to read.
So far I have created something like this for the Admin section:
export const AdminRoutes = (): any => {
return (
<Routes>
<Route path="admin" element={<Admin />}>
</Routes>
)}
and I have imported it like this inside App.tsx:
...
<Route element={<AdminRoutes />} path="admin" />
...
I am expecting to see the <Admin /> component (defined in AdminRoutes), although I don't get any errors the screen is blank.

export const AdminRoutes = (): any => {
return (
<Routes>
<Route path="admin" element={<Admin />}>
</Routes>
)}
Since you're using relative paths, the actual url that this will match is /admin/admin, one comes from the top level route in App, and another from here. Assuming you wanted this to only match "/admin", you can instead do:
<Route path="*" element={<Admin />}/> // Matches /admin
<Route path="dashboard" element={<Dashboard/>}/> // Matches /admin/dashboard
Or you could use an absolute path:
<Route path="/admin" element={<Admin />}/>
<Route path="/admin/dashboard" element={<Dashboard/>}

Creating react-router Routes in a function

Is it possible to create the <Route> elements through a function? I would like to display different routes/pages and the application is not aware how many they are. The pages are in the state stored in an array of page objects. Each page object have an id, title, path and body elements (so far). I think that my Router should look like this:
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="page1" component={CommonPage}/>
<Route path="page2" component={CommonPage} />
<Route path="page3" component={CommonPage} />
<Route path="page4" component={CommonPage}/>
<Route path="page5" component={CommonPage} />
<Route path="page6" component={CommonPage} />
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.body)
And I would like to define it with a function like:
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
{
mapPagesToRoutes(pages)
}
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.body)
mapPagesToRoutes(pages) {
return pages.map( page => () {
if(page.type === 'CommonPage' {
return <Route path={page.path} component={CommonPage}
}
}
}
Q1: How is this done?
Q2: How do I identify each with something other than the path. Can I use some sort of key=page.id in <Route>?

If you want to pass properties to your child route components, you can do something like this:
<Route path={page.path} component={() => <CommonPage someProp={page.someProp}/>}/>

If you want to dynamically create React Routes then you can use a route with a parameter, like so. Here's your Router:
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="/page:pageNumber" pages={this.state.pages} component={CommonPage} />
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.body)
Then in your CommonPage component have something like this:
render() {
return(<div>This is {this.props.params.pageNumber}</div>);
}
That should give you the ability to navigate to any /pageX route. Then in CommonPage component you can compare the pageNumber parameter and the pages property (available via this.props.route.pages) to see if the current page number is valid

Double curly braces error with ReactDOM

What's causing this error?
Syntax error: Unexpected token, expected ,
{ Object.keys(form_routes).map( (key,index) => <Route path={key} component={{ form_routes[key] }}></Route> ) }
at {{ form_routes[key] }}
full relevant code:
const form_routes = {
'start': "Start",
'part1': "Part1",
'part2': "Part2",
'part3': "Part3",
'part4': "Part4",
'part5': "Part5",
'part6': "Part6"
}
ReactDOM.render(
<Provider store={store}>
<Router history={hashHistory} render={applyMiddleware(useRelativeLinks())}>
<Route path="/" component={App}>
<IndexRedirect to='/search'/>
<Route path='main' component={MainMenu}/>
<Route path='search' component={Search}/>
<Route path='form' component={Form}>
<IndexRedirect to='start'/>
{ Object.keys(form_routes).map( (key,index) => <Route path={key} component={{ form_routes[key] }}></Route> ) }
</Route>
</Route>
</Router>
</Provider>,
root
);
Works if plain:
<Route path='start' component={Start}></Route>
<Route path='part1' component={Part1}></Route>
<Route path='part2' component={Part2}></Route>
<Route path='part3' component={Part3}></Route>
<Route path='part4' component={Part4}></Route>
<Route path='part5' component={Part5}></Route>
<Route path='part6' component={Part6}></Route>

component={...} is supposed to contain an expression. The expression you're giving it is { form_routes[key] }, which is an invalid object initializer. This would trigger the same error:
console.log({ form_routes[key] });
You probably just wanted component={ form_routes[key] }.

How do I modify the route parameters sent as props with React Router?

I have a React Router with routes like this:
<Router history={history}>
<Route path='/' component={App} />
<Route path='/:fileType/:fileId' component={App} />
</Router>
This puts props into my App like so:
{
fileType: 'whatever',
fileId: 'ABC5734'
}
However, I have designed my component so that it expects this format:
{
file: {
type: 'whatever',
id: 'ABC5734'
}
}
I would therefore like to transform the path props before they are sent to the component. Something like this:
<Router history={history}>
<Route path='/' component={App} />
<Route
path='/:fileType/:fileId'
component={(props) => <App file={{type: props.fileType, id: props.fileId}} />} />
</Router>
Is this possible?

You should use a Higher-Order Component.
You could use the mapProps Higher-order Component from recompose :
import mapProps from 'recompose/mapProps'
<Router history={history}>
<Route path='/' component={App} />
<Route
path='/:fileType/:fileId'
component={mapProps(({ params: { fileType, fileId } }) => ({
fileType,
fileId
}))(App)}/>
</Router>

React-router sends route params under this.props.params. So, correct your your code.
<Router history={history}>
<Route path='/' component={App} />
<Route
path='/:fileType/:fileId'
component={(props) => <App file={{type: props.params.fileType, id: props.params.fileId}} />} />
</Router>