这是所有路由都在其中管理的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
可能是一个问题还是我错过的任何其他内容
任何帮助表示赞赏。