CODEWITHSUNDEEP
reactjsreact-router-v4
Antonio Pavicevac-Ortiz
Antonio Pavicevac-Ortiz

Reputation: 7739

Dynamic Routing vs. Static routing in React

Before version 4 of React Router, it was said that you'd establish routes statically as part of the app's initialization process.

// routes.js

const routes = (
  <Router>
    <Route path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route path='playerOne' component={Prompt} />
      <Route path='playerTwo/:playerOne' component={Prompt} />
      <Route path='battle' component={ConfirmBattle} />
      <Route path='results' component={Results} />
      <Route onEnter={checkAuth} path='dashboard' component={Dashboard} />
    </Route>
  </Router>
)

export default routes

And when you'd initialize your app, you'd import your routes and render them.

// index.js

import React from 'react'
import ReactDOM from 'react-dom'
import routes from './config/routes'

ReactDOM.render(routes, document.getElementById('app'))

Today in version 4 of React-Router you do something like this:

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom'

const Home = () => (
  <h2>Home</h2>
)

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route path='/' component={Home} />
        </div>
      </Router>
    )
  }
}

export default App

I'm not sure I can see the difference or understand the difference. It is also said that now in V4 it is more commensurate with the way React works. Declarative, component based. Can someone explain it with examples?

Thanks in advance!

Upvotes: 2

Views: 1266

Answers (1)

Wolfie
Wolfie

Reputation: 1381

If your application is a bunch of distinct pages, you will not notice much difference between react-router v3 and v4. You will have one router that is a switch between many different pages of the application. Where react-router really shines is that you can include the router in arbitrary components. If you have a page /settings, maybe you want to show an additional content panel when the router is /settings/additional-content. You can inject the router into your SettingsPage, and conditionally render AdditionalSettingsComponent if the route matches. In contrast, react-router v3 would require you to have two components: SettingsPage and SettingsPageAdditionalSettings.

In react-router v3, you had to declare all of your routes in one place, so you miss out on the ability to optionally render parts of your application to the most fine grained level. Again, if you application is a bunch of distinct pages, you will not see this advantage. But if your application contains pages with components that may or may not be rendered depending on the url, then react-router v4 will be very useful.

From the docs:

The Route component is perhaps the most important component in React Router to understand and learn to use well. Its most basic responsibility is to render some UI when a location matches the route’s path.

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

If the location of the app is / then the UI hierarchy will be something like:

<div>
  <Home/>
  <!-- react-empty: 2 -->
</div>

And if the location of the app is /news then the UI hierarchy will be:

<div>
  <!-- react-empty: 1 -->
  <NewsFeed/>
</div>

Upvotes: 2

Related Questions