Reactjs Static and Dynamic Routes

user_11719726 0
Viewed 375

i am trying to use both Static Routes as well as Dynamic Routes in my React App. I have a JSON File which contains all Dynamic routes the App has which looks like this:

[
  {
    "Text": "Home",
    "Link": "/"
  },
  {
    "Text": "Users",
    "Link": "/Users"
  },
  {
    "Text": "Posts",
    "Link": "/Posts"
  }
]

This is my App (i removed some Code, which isn't needed)

import React from 'react';

function App() {

    return (
        <div className="Grid-Container">
           <Router>
            <Switch>
                <div>
                    <!-- Static Route to the Settings section -->
                    <Route
                        path='/settings/home'
                        component={Settings}
                        key={'Settings'}/>
                    <!-- Dynamic Route which displays all Entries for the chosen Page -->
                    <Route
                        path={`/${page.Text}`}
                        component={objectPage}
                        key={`${page.Text}-List`}
                        exact/>
                    <!-- Dynamic Route which displays one Entry for the chosen Page --> 
                    <Route
                        path={`/:object/:id`}
                        component={DetailPage}
                        key={`Detail-Route`}
                        exact/>
                </div>
            </Switch>
          </Router>
        </div>
    );
}

export default App;

The Dynamic Routes are working as expected but as soon as i try to go to the Settings Page, i see the Content of the Detail Page which i don't want.

react-router reactjs
2 Answers

Use exact props

<Route
       path='/settings'
       component={Settings}
       key={'Settings'}
       exact
/>
user_21387520

Try putting the static Route as first child of your Switch.

What is happening is that the Switch is comparing your URL chronologically to your Routes. It interprets your settings as a url parameter :object. Because it now found a Route that it thinks matches your URL it will render out your Details Page and won't check if any of your other Routes match as well or even better.

import React from 'react';

function App() {

    return (
        <div className="Grid-Container">
            <Router>
                <Switch>
                    <!-- Static Route to the Settings section -->
                    <Route
                        path='/settings'
                        component={Settings}
                        key={'Settings'}/>

                    <!-- Dynamic Route which displays all Entries for the chosen Page -->
                    <Route
                        path={`/${page.Text}`}
                        component={<ObjectPage />}
                        key={`${page.Text}-List`}
                        exact/>
                    <!-- Dynamic Route which displays one Entry for the chosen Page -->
                    <Route
                        path={`/:object/:id`}
                        component={DetailPage}
                        key={`Detail-Route`}
                        exact/>
                </Switch>
            </Router>
        </div>
    );
}

export default App;
user_146710450
Related