今天基于create-react-app創(chuàng)建的項目來實現(xiàn)一些簡單的路由實例.因為只是展示一些小的demo所以所有組件都展示到一個文件中,項目中按照實際需求劃分即可.
首先安裝react-router-dom
npm I react-router-dom -S or
cnpm I react-router-dom -S or
yarn add react-router-dom
安裝成功后啟動項目,在src下面創(chuàng)建一個routerdemo.js文件,接下來我們所有的操作均在這個文件中進行.
我們先創(chuàng)建三個組件,一個首頁,一個about頁面,還有一個是about組件下面的一個動態(tài)路由的跳轉detail組件,代碼如下:
import React from "react"
import { BrowserRouter as Router, Route, Link } from "react-router-dom"http://引入我們需要的路由組件,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"匹配動態(tài)路由
</Router>
)
}
function Detail(props){
return (
<div>
<p>這是detail頁面</p>
<p>這是一篇關于{props.match.params.title}的介紹</p>//獲取路由傳遞過來的參數(shù)
</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"http://將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">發(fā)現(xiàn)</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
我們發(fā)現(xiàn)每個頁面都匹配到了404這個頁面,顯然這不是我們想要的效果,我們只想在點擊“發(fā)現(xiàn)”時匹配到.這時需要用到路由中Switch組件了,Switch只匹配一個,找到第一個匹配項后便停止,現(xiàn)在修改代碼
//還是要先引入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">發(fā)現(xiàn)</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
這次便沒有問題了.
