What exactly is Dynamic Routing in ReactJS What exactly is Dynamic Routing in ReactJS reactjs reactjs

What exactly is Dynamic Routing in ReactJS


I don't think the above explanation is correct for Static vs Dynamic routing.Also there is not much explanation in the web for it, but there is a very nice explanation in React Router Docs.From the Docs

If you’ve used Rails, Express, Ember, Angular etc. you’ve used static routing. In these frameworks, you declare your routes as part of your app’s initialization before any rendering takes place. React Router pre-v4 was also static (mostly). Let’s take a look at how to configure routes in express:

In Static routing, the routes are declared and it imported in the Top level before rendering.

Whereas in Dynamic routing

When we say dynamic routing, we mean routing that takes place as your app is rendering, not in a configuration or convention outside of a running app.

So in Dynamic routing, the routing takes place as the App is rendering.The examples explained in the above answer are both for static routing.

For Dynamic routing it is more like

const App = () => (    <BrowserRouter>        {/* here's a div */}        <div>        {/* here's a Route */}        <Route path="/tacos" component={Tacos}/>        </div>    </BrowserRouter>)// when the url matches `/tacos` this component rendersconst Tacos  = ({ match }) => (    // here's a nested div    <div>        {/* here's a nested Route,            match.url helps us make a relative path */}        <Route        path={match.url + '/carnitas'}        component={Carnitas}        />    </div>)

First in App component only one route is declared /tacos.When the user navigates to /tacos the Tacos component is mounted and there the next route is defined /carnitas.So when the user navigates to /tacos/carnitas, the Carnitas component is mounted and so on.

So here the routes are initialized dynamically.


Use react-router and react-router-dom, and write something like this:

onSubmit((e) => {e.preventDefault();this.props.history.push('<url>')}

so at any place you may run this line and go to another locations conditionaly