CODEWITHSUNDEEP
javascriptreactjsmodulereact-router
Guido Anselmi
Guido Anselmi

Reputation: 3922

Why is BrowserRouter both a Router and a Route

Could someone explain what is happening with the double import in the below code? It sniffs of polymorphism but I don't think that is what's happening.

This is from the ReactRouter docs. It works, I just want to understand what's happening behind the scenes.

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: 1

Views: 1042

Answers (1)

Tyler Sebastian
Tyler Sebastian

Reputation: 9468

You're not importing it "as a Router and a Route."

When you write import { Something as Alias, SomethingElse } from 'module'; you're just aliasing - in this case module.Something becomes Alias.

Equivalent code, without aliasing, would be 

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

<BrowserRouter>
    ...
</BrowserRouter>

Upvotes: 3

Related Questions