reactjs - 在 react-router 4 中单击导航链接后如何加载页面

Question

我开始反应。单击页面链接后，我想完全加载页面。但是现在点击了 Navlink 页面，DOM 被更新的 DOM 替换了。

导航.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;

应用程序.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>
        );
    }
}

标签： reactjsreact-navigation

Answer 1

如果你需要一个完整的页面重新加载，你需要使用 classic<a href="/path">标签而不是<Link>from react-router。这将导致整个页面重新加载。