今天基于create-react-app创建的项目来实现一些简单的路由实例.因为只是展示一些小的demo所以所有组件都展示到一个文件中,项目中按照实际需求划分即可.
首先安装react-router-dom
npm I react-router-dom -S or
cnpm I react-router-dom -S or
yarn add react-router-dom
安装成功后启动项目,在src下面创建一个routerdemo.js文件,接下来我们所有的操作均在这个文件中进行.
我们先创建三个组件,一个首页,一个about页面,还有一个是about组件下面的一个动态路由的跳转detail组件,代码如下:
import React from "react"
import { BrowserRouter as Router, Route, Link } from "react-router-dom"//引入我们需要的路由组件,as相当于是给BrowserRouter取个别名,这样我们在使用的时候就可以直接用Router了
function Home(){
return (
<div>
这是首页
</div>
)
}
function About(){
return (
<Router>
这是About页面
<ul>
<li><Link to="/detail/react">react</Link></li>
<li><Link to="/detail/vue">vue</Link></li>
<li><Link to="/detail/jquery">jquery</Link></li>
</ul>
<Route path="/detail/:title" component={Detail}></Route>//"/:title"匹配动态路由
</Router>
)
}
function Detail(props){
return (
<div>
<p>这是detail页面</p>
<p>这是一篇关于{props.match.params.title}的介绍</p>//获取路由传递过来的参数
</div>
)
}
export default function Routerdemo(){
return (
<Router>
<div style={{marginBottom:"15px"}}>
<Link to="/">首页 </Link>
<Link to="/about">关于</Link>
</div>
//exact表示要精准匹配,不加的话会一直显示首页的内容
<Route exact path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
</Router>
)
}
查看页面
1.gif
detail组件拿到了我们通过路由传递的值,下面我们来看下重定向这个组件Redirect,我们新添加一个用户中心的组件
import React from "react"
import { BrowserRouter as Router, Route, Link, Redirect } from "react-router-dom"//将Redirect组件引入
//前面代码不变,新添加一个Person组件
function Person(){
return (
<Router>
这是用户中心
{/* 用户中心添加子路由 */}
<ul>
<li><Link to="/person/info">个人信息</Link></li>
<li><Link to="/person/list">我的订单</Link></li>
</ul>
<Route path="/person/info" component={PersonInfo}></Route>
<Route path="/person/list" component={PersonList}></Route>
{/* Redirect可以让我们在进入Person组件后默认展示PersonInfo子组件 */}
<Redirect to="/person/info" component={PersonInfo}></Redirect>
</Router>
)
}
//下面添加PersonInfo和PersonList子组件
function PersonInfo(){
return (
<div>
这里展示用户的个人信息
</div>
)
}
function PersonList(){
return (
<div>
这里展示用户的订单列表
</div>
)
}
//将用户中心添加到路由组件中
export default function Routerdemo(){
return (
<Router>
<div style={{marginBottom:"15px"}}>
<Link to="/">首页 </Link>
<Link to="/about">关于</Link>
<Link to="/person">用户中心</Link>
</div>
<Route exact path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/person" component={Person}></Route>
</Router>
)
}
查看页面,当我们点击到用户中心的时候,PersonInfo默认显示了
2.gif
最后我们来匹配一个404的页面,如果用户直接输入一个不存在路由地址,我们将页面跳转到404页面.
新增一个404的组件
//404组件
function Nopage(){
return (
<div>
这是404页面
</div>
)
}
//将404添加到路由组件中
export default function Routerdemo(){
return (
<Router>
<div style={{marginBottom:"15px"}}>
<Link to="/">首页 </Link>
<Link to="/about">关于</Link>
<Link to="/person">用户中心</Link>
<Link to="/search">发现</Link>//这里我们随意定义一个不存在的地址为了匹配404
</div>
<Route exact path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/person" component={Person}></Route>
<Route component={Nopage}></Route>//不需要写path
</Router>
)
}
查看页面效果
3.gif
我们发现每个页面都匹配到了404这个页面,显然这不是我们想要的效果,我们只想在点击“发现”时匹配到.这时需要用到路由中Switch组件了,Switch只匹配一个,找到第一个匹配项后便停止,现在修改代码
//还是要先引入Switch组件
import React from "react"
import { BrowserRouter as Router, Route, Link, Redirect, Switch } from "react-router-dom"
//其余代码不变我们只需要修改最终导出的路由组件
export default function Routerdemo(){
return (
<Router>
<div style={{marginBottom:"15px"}}>
<Link to="/">首页 </Link>
<Link to="/about">关于</Link>
<Link to="/person">用户中心</Link>
<Link to="/search">发现</Link>
</div>
<Switch>//用Switch包裹住Route组件
<Route exact path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/person" component={Person}></Route>
<Route component={Nopage}></Route>
</Switch>
</Router>
)
}
查看页面效果
4.gif
这次便没有问题了.
