Reputation: 3922
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
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