即使在使用<link />和react-router进行导航后,应用程序也会刷新

时间:2018-04-09 05:38:01

标签: reactjs react-router-v4

这是所有路由都在其中管理的routes.js。

    import React from 'react';
    import { BrowserRouter as Router, Route, Link  } from 'react-router-dom';
    import App from './App';
    import Home from './components/home/home';
    import Products from './components/products/products';
    import AboutUs from './components/aboutUs/aboutUs';
    import Careers from './components/careers/careers';
    const Routes = () => (
        <Router>
            <App>
                <Route exact path="/" component={Home} />
                <Route path="/products" component={Products} />
                <Route path="/aboutus" component={AboutUs} />
                <Route path="/careers" component={Careers} />
            </App>
        </Router>
    );

    export default Routes;  

App.js

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import AppHeader from './components/appHeader/appHeader';
import AppFooter from './components/appFooter/appFooter';

class App extends Component {
  render() {
    return (
      <div className="home">
          <AppHeader/>

          <div>{this.props.children}</div>

          <AppFooter/>
      </div>
    );
  }
}

export default App;

在我的AppHeader中,我正在使用链接重定向

<div className="nav-module menu-module">
                                <ul className="menu">
                                    <li>
                                        <Link to="/" className={this.getCurrentPath() == 'home' ? "current":""}>Home</Link>
                                    </li>
                                    <li>
                                        <Link to="/products" className={this.getCurrentPath() == 'products' ? "current":""}>Products</Link>
                                    </li>
                                    <li>
                                        <Link to="/aboutus" className={this.getCurrentPath() == 'aboutus' ? "current":""}>About Us</Link>
                                    </li>
                                    <li>
                                        <Link to="/careers" className={this.getCurrentPath() == 'careers' ? "current":""}>Careers</Link>
                                    </li>
                                </ul>
                            </div>

我不知道为什么即使在使用<Link>中的react-router-dom后应用程序也会刷新。版本react-router-dom可能是一个问题还是我错过的任何其他内容 任何帮助表示赞赏。

0 个答案:

没有答案