Reputation: 171
At the time of navigation the entire page get loaded instead the particular component.
Routes page:
<BrowserRouter>
<Switch>
<Route exact path="/" component={LandingPage}/>
<Route exact path="/contact" component={Contact} />
<Route exact path="/about-us" component={AboutUs} />
<Route exact path="/services" component={Services} />
<Route exact path="/products" component={Products} />
</Switch>
</BrowserRouter>
Navigation bar:
<NavItem>
<NavLink href="/">
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="/about-us"
>
About Us
</NavLink>
</NavItem>
App.js:
<BrowserRouter>
<Route component={Routes}/>
</BrowserRouter>
Usually when we clicks the navigation links in navigation bar it will provide the required component without loading the entire page here its loading the entire page.
react version : 16.8.6
Upvotes: 0
Views: 178
Reputation: 66
Place your navigation component on top or outside of <Switch/>
component, so it's able to receive props as url and many others for navigation from it's parent(<BrowserRouter/>
) and then just render what is inside of <Switch/>
.
You could simplify your component like this:
const Routes = (
<BrowserRouter>
<NavigationBar />
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/contact" component={Contact} />
<Route exact path="/about-us" component={AboutUs} />
<Route exact path="/services" component={Services} />
<Route exact path="/products" component={Products} />
</Switch>
</BrowserRouter>
)
Also try to avoid nesting
<BrowserRouter/>
inside another<BrowserRouter/>
.
Avoid navigation using href
because you will flush all the running js code and then the whole page will be requested once again, to navigate with React Router
you have to use nagivation through the history
API, for this you have 2 options:
Semantically:
importing <Link/>
wherever you need
import {Link} from "react-router-dom"
...
<Link to="./new-url"/>
Programmatically: Pushing the new url to the history api
this.props.history.push("./new-url")
Remember: In order to make it work you need to pass props to the actual component.
Upvotes: 0
Reputation: 1037
Are you using react-routers NavLink, If not try this,
import { NavLink } from 'react-router-dom'
<NavLink to="/about-us">About</NavLink>
Note: the prop used is to not href
One more thing <BrowserRouter/>
isn't required in App.js as you are using it inside the Routes component
Upvotes: 1