CODEWITHSUNDEEP
reactjsreact-router
Jerald George
Jerald George

Reputation: 171

The entire page get loaded at the time of navigation

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

Answers (2)

Kevin Rom&#225;n Oca Sierra
Kevin Rom&#225;n Oca Sierra

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:

  1. Semantically: importing <Link/> wherever you need

        import {Link} from "react-router-dom"
    ...
    <Link to="./new-url"/>

  2. 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

akshay kishore
akshay kishore

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

Related Questions