react router v6 No routes matched location

Question

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?

Answer 1

The route rendering the Explore component needs to specify a trailing wildcard matcher "*" so descendent routes can also be matched.

Descendent <Routes>

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="create" element={<Creation user={account} />} />
  <Route
    path="/explore/*" // <-- add trailing wildcard matcher
    element={<Explore />}
  />
  <Route path='/dashboard' element={<Dashboard />} />
  <Route path='test' element={<Test />} />
</Routes>

Keep in mind that <Link to={`/explore/${infoItem.id}`}>View event</Link> is specifying an absolute path "/explore/:id" and nested Routes components builds from the parent route:

<Link to={`/explore/${infoItem.id}`}>View event</Link>

...

<Routes>
  <Route 
    path='/:id' // <-- Omit "/explore" from path
    element={<Test />}
  />
</Routes>

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>
);

Answer 2

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>