I'm want to navigate user to a specific url with a param into sees it as a list items with a view item button. When I click the view button item get the following warnng message
No routes matched location "/explore/0xD78Fb56DB0b68F9766975FEEbf7bFd0CF65C9F11"
in my App.js I have this
<BrowserRouter>
<Header style={styles.header}>
<Navbar />
<Account />
</Header>
<div style={styles.content}>
<Wrapper>
<Routes>
<Route path="/" element={<Home />} />
<Route path="create" element={<Creation user={account} />} />
<Route path="/explore" element={<Explore />} />
<Route path='/dashboard' element={<Dashboard />} />
<Route path='test' element={<Test />} />
</Routes>
</Wrapper>
</div>
</BrowserRouter>
all this routes work fine now in the /explore route I have my items list
and I did something like this (I followed the react-router doc)
return (
<div style={{marginTop:'5em'}}>
{isInitialized ?
<div className='wrapper'>
{eventArray.map(infoItem => (
<div key={infoItem.id}>
<CardEvent img={infoItem.pathImg ? infoItem.pathImg : lpass}
title={infoItem.idName}
date={infoItem.eventDate.toString()}
/>
<Link to={`/explore/${infoItem.id}`}>View event </Link>
</div>
)
)}
<Routes>
<Route
path='explore/:id'
element={<Test />}
/>
</Routes>
</div>
: <p>Error</p>
}
</div>
What did I do wrong here?
CodePudding user response:
The route rendering the Explore
component needs to specify a trailing wildcard matcher "*"
so descendent routes can also be matched.
Or to use relative routing, omit the leading "/"
slash and link relatively to the infoItem.id
.
<Link to={`${infoItem.id}`}>View event</Link>
...
<Routes>
<Route path=':id' element={<Test />} />
</Routes>
Update
So is there anyway to render in a new page and not under my component? So if I go to
"/explore/event1"
Test
does not appear under the event list but in another new blank page?
Yes. For this I suggest a small refactor to move the <Route path=':id' element={<Test />} />
out to the main routing. Use a layout route to render an Outlet
and nest an index route specifically for Explore
and a nested route for Test
. Remove the Routes
code from Explore
.
Example:
<Routes>
<Route path="/" element={<Home />} />
<Route path="create" element={<Creation user={account} />} />
<Route path="/explore">
<Route index element={<Explore />} /> // "/explore"
<Route path=":id" element={<Test />} /> // "/explore/:id"
</Route>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="test" element={<Test />} />
</Routes>
Explore
return (
<div style={{marginTop:'5em'}}>
{isInitialized ?
<div className='wrapper'>
{eventArray.map(infoItem => (
<div key={infoItem.id}>
<CardEvent
img={infoItem.pathImg ? infoItem.pathImg : lpass}
title={infoItem.idName}
date={infoItem.eventDate.toString()}
/>
<Link to={`/explore/${infoItem.id}`}>View event </Link>
</div>
))}
</div>
: <p>Error</p>
}
</div>
);
CodePudding user response:
Have you tried to declare your routes like this ?
<BrowserRouter>
<Header style={styles.header}>
<Navbar />
<Account />
</Header>
<div style={styles.content}>
<Wrapper>
<Routes>
<Route path="/" element={<Home />} />
<Route path="create" element={<Creation user={account} />} />
<Route path="explore" element={<Explore />}>
<Route path=":exploreId" element={<Test />} /> // Wrap this route inside the explore route
</Route>
<Route path='dashboard' element={<Dashboard />} />
<Route path='test' element={<Test />} />
</Routes>
</Wrapper>
</div>
</BrowserRouter>