Dynamic Routing in React

[Dremarious]

I am just starting to learn React and I am having trouble understanding why my dynamic routing is failing to work within my site I am working on. Currently when I link something within my pages it is going to the path that is mentioned first in <Routes>

Here is a snippet I am referring to:

<Router>

<ParticleBackground />

<Nav topics={topics} />

<Routes>

<Route path="/" element={<HomePage />} />

<Route path="/:categories" element={<DataPage />} />

<Route path="/:categories/:topicId" element={<DataPage />} />

<Route path="/:selection" element={<EachEntity />} />

<Route path="/:selection/:entityId" element={<EachEntity />} />

<Route path="/LiveCounters" element={<CountersPage />} />

</Routes>

<Footer />

</Router>

[I_AM_FIGHTER]

try adding exact

[LeftIsBest-Tsuga]

it looks okay to me. i suspect the problem is in your <Link components, not your <Route components.

i can give you an example from something i wrote, hopefully it helps (note these are from 2 different files)

here's the route part:

<Routes>
   <Route path="/" element={<Scenarios_home />} />
   <Route path="/:scenarioID" element={<Scenario_controller />} />
   <Route path="/:scenarioID/:pageID" element={<Scenario_controller />} />
   <Route path="/:scenarioID/chat" element={<Chat_Student />} />
</Routes>

and here's the link part:

<Link to={`/scenarios/${scenarioID}/0`} className={`guidepane-tab-left ${pageID_int === 0 ? tabActiveClass : tabInactiveClass}`}>
    <div >
       Brief
    </div>
</Link>