Navigating into the default main route in chrome extension (React) - reactjs

Question

I'm building a new chrome extension using ReactJS, and I'm trying to redirect on '/' (default) to an existing route using the component of react-router.
For some reason, I can see it when I compile it to localhost, but when I upload it as a chrome extension I can't see it anymore.
What I thought about is that maybe there is another route that is in use as the main route in chrome extension instead of '/'.
I tried to console.log it but for some reason, it is not showing me the logs.
Thanks!
<div className="App">
<BrowserRouter>
<Navbar />
<Route
path="/"
exact
render={() => <Redirect to="/navigatehere" /> }
/>
<Route
path="/navigatehere"
exact
render={() => <NavigateHere />}
/>
</BrowserRouter>
</div>
);
}
export default App;

Answer 1

First Of all you need Switch to use exact prop.
You can import it like this.
import {BrowserRouter, Switch, Route}
// Then you have to use
<BrowserRouter>
<div>
<Switch>
<Route path='/' exact /*render Whatever you want after this . . .*/ />
</Switch>
</div>
</BrowserRouter>
Second of all, I use component prop instead of render().
Like this -
import DummyComponent from './DummyFolder/DummyComponent;
import React from 'react'
import {BrowserRouter as Router, Switch, Route}
<BrowserRouter>
<div>
<Switch>
<Route path='/' exact component={DummyComponent}/> // This will render the component in the respective path
</Switch>
</div>
</BrowserRouter>
However render() should also work for you if you use <Switch>. It is working without Switch for rest of the router because you are not specfing path as '/' for all the <Route />. If you want to route to '/', then Switch is compulsory. You can also refer DevEd 's YouTube channel for more understanding. He has made an exclusive video on React Router. Check that out Here ◀ ◀ ◀.