CODEWITHSUNDEEP
reactjsreact-navigation
Rajendran bala
Rajendran bala

Reputation: 87

How to load a page after click Nav link in react-router 4

I am beginning to React. After clicking the page link I want to load a page completely. But now the page Navlink is clicked the DOM is replaced with updated DOM.

Navigation.js

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { navigationlinks as links } from "../../../data.json";

class Navigation extends Component {
    render() {
        return (
            <div className="header-nav navbar-collapse collapse ">
                <ul className=" nav navbar-nav">
                    {links.to.map((to, i) => 
                        <li key={links.tab[i]}>
                            <NavLink to={to}>{links.tab[i]}</NavLink>
                        </li>
                    )}
                </ul>
            </div>
        );
    }
}
export default Navigation;

App.js

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Switch>
                        <Route path="/" component={Index} exact />
                        <Route path="/aboutus" component={Aboutus} exact />
                        <Route path="/services" component={Services} exact />
                        <Route path="/contact" component={Contact} exact />
                        <Route path="*" component={PageNotFound} />
                    </Switch>
                </div>
            </BrowserRouter>
        );
    }
}

Upvotes: 0

Views: 2567

Answers (1)

Shevchenko Viktor
Shevchenko Viktor

Reputation: 5416

If you need a complete page reload, you need to use classic <a href="/path"> tag instead of <Link> from react-router. This will cause full page reload.

Upvotes: 4

Related Questions