在React Router 4中,单击导航链接后加载页面可以通过以下步骤实现:
npm install react-router-dom
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
class App extends React.Component {
render() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
}
Home
,About
和Contact
路径,可以创建以下组件:const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const Contact = () => <h1>Contact Page</h1>;
ReactDOM.render(<App />, document.getElementById('root'));
现在,当单击导航链接时,React Router 4会根据相应的路径加载并呈现相应的页面组件。请注意,使用<Link>
组件定义的导航链接将自动处理页面的加载和URL的更新。
这是React Router 4中单击导航链接后加载页面的基本实现方法。请注意,腾讯云没有专门的产品与React Router 4相关联。但是,腾讯云可以作为托管React应用程序的云平台,并提供与应用程序部署、域名管理、CDN加速等相关的云服务。更多关于腾讯云相关产品的信息可以在以下链接中找到:
领取专属 10元无门槛券
手把手带您无忧上云