What exactly is Dynamic Routing in ReactJS

Question

I have been all around internet about the dynamic routing of React. But I couldn't find anything which explains how it works and how it is different than static routing in every single sense.

I understood it pretty well how the things go when we want to render something in the same page using React-Route.

My question is how does it work when a whole new page is wanted to be rendered? Because in this case all the DOM inside that page has to be re-rendered. Thus would it be static routing? or still dynamic in some ways?

I hope I've been clear. Thanks for the answers in advance, I appreciate!

Welcome to stackoverflow - this site is a Q & A site, not really a discussion forum - I suggest trying things out and if you have problems, come back with specific questions. — StudioTime
– StudioTime, Commented Sep 7, 2017 at 13:15
Thank you for the welcome. I apologise if I have done anything wrong, my purpose was not really to discuss but just to understand the real difference between these two terms. — Red fx
– Red fx, Commented Sep 7, 2017 at 13:30
Since the answer you marked is vividly not correct, please consider changing answer mark to prevent misleading of other users. — Reyraa
– Reyraa, Commented Mar 21, 2018 at 15:29

pritesh · Accepted Answer · 2018-01-23 15:29:12Z

33

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 renders
const 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.

answered Jan 23, 2018 at 15:29

pritesh

2,20222 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ruhul Amin Over a year ago

But we call it “Dynamic Routing”, which is quite different from the “Static Routing” you’re probably more familiar with.

pritesh Over a year ago

Didn't got your statement?

Oleksiï Nikonov · Accepted Answer · 2019-06-04 10:33:02Z

-2

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

answered Jun 4, 2019 at 10:33

Oleksiï Nikonov

5,6566 gold badges48 silver badges77 bronze badges

1 Comment

Oleksiï Nikonov Over a year ago

so what's the reasons to get minused?

Collectives™ on Stack Overflow

What exactly is Dynamic Routing in ReactJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related