使用 React 构建的单页面应用, 要想实现页面间的跳转, 首先想到的就是使用路由. 在 React 中, 常用的有两个包可以实现这个需求, 那就是 react-router 和 react-router-dom. 本文主要针对 react-router-dom 进行说明.
首先进入项目目录, 使用 NPM 安装 react-router-dom:
NPM install react-router-dom --save-dev // 这里可以使用 cnpm 代替 NPM 命令
操作:
1, 新建 router 文件
- // 引入 react-router-dom
- import { HashRouter, Route, Switch, BrowserRouter as Router } from "react-router-dom";
- // 分别添加两个页面
- import App from '../App';
- import Home from '../Home';
- const BasicRoute = () => (
- <Router>
- <Switch>
- <Route exact path="/" component={App} activeClassName="active"/>
- <Route exact path="/home" component={Home} activeClassName="active"/>
- </Switch>
- </Router>
- );
- export default BasicRoute;<br>
- 2,index.JS
- // 引入路由
- import Router from './router/router';
- // 首先渲染的 component
- ReactDOM.render(<Router/>, document.getElementById('root'));
3, 路由的跳转
- import {
- BrowserRouter as Router,
- Route,
- Link,
- Prompt
- } from "react-router-dom";
- <Link to="/home">home</Link>
- <input type="button" value="Home" onClick={this.goHome.bind(this)}/>
state 隐式传参
<Link to={{ pathname:'/home',state:{ type: 'id' }}}>home</Link>
query 隐式传参
- <Link to={{ pathname: '/home',query:{ type: 'id' }}}>
- home
- </Link>
- <br>
- {/* 离开页面时提示 */}
- <br>
- <Prompt message="您确定要离开该页面吗?" />
方法跳转 < br>goHome() {
- this.props.history.push({
- pathname: '/Home',
- state: {
- id: 3
- }
- })
- }<br><br>// 子页面 接受传值 (不同方式下的接受方式)
来源: http://www.css88.com/qa/react/14481.html