简介
使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由。在React中,常用的有两个包可以实现这个需求,那就是react-router和react-router-dom。 本文主要针对react-router-dom进行说明。
<Switch>是唯一的因为它仅仅只会渲染一个路径。相比之下(不使用<Switch>包裹的情况下),每一个被location匹配到的<Route>将都会被渲染。
安装
首先进入项目目录,使用npm安装react-router-dom:
npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令
基本操作
然后我们新建两个页面,分别命名为“home”和“detail”。在页面中编写如下代码:
import React from 'react'; export default class Home extends React.Component { render() { return ( <div> <a>去detail</a> </div> ) } }
home.js
import React from 'react';
export default class Home extends React.Component { render() { return ( <div> <a>回到home</a> </div> ) } }
detail.js
然后再新建一个路由组件,命名为“Router.js”,并编写如下代码:
import React from 'react'; import {HashRouter, Route, Switch} from 'react-router-dom'; import Home from '../home'; import Detail from '../detail'; const BasicRoute = () => ( <HashRouter> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/detail" component={Detail}/> </Switch> </HashRouter> );
export default BasicRoute;
如上代码定义了一个纯路由组件,将两个页面组件Home和Detail使用Route组件包裹,外面套用Switch作路由匹配,当路由组件检测到地址栏与Route的path匹配时,就会自动加载响应的页面。
然后在入口文件中——我这里指定的是index.js——编写如下代码:
import React from 'react'; import ReactDOM from 'react-dom'; import Router from './router/router'; ReactDOM.render( <Router/>, document.getElementById('root') );
这里相当于向页面返回了一个路由组件。我们先运行项目看一下效果,在地址栏输入“http://localhost:3000/#/”:
输入“http://localhost:3000/#/detail”:
如果不使用 switch
两个组件都打印
原文地址:https://www.cnblogs.com/karajanking/p/15244982.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。