react路由的安裝方法:1、透過「npm i react-router-dom@5.0 -S」安裝路由;2、使用「import { HashRouter as Router, Route, NavLink } from 'react-router -dom'”方式導入路由即可。
本教學操作環境:Windows10系統、react-router-dom5.0版、Dell G3電腦。
react路由怎麼安裝?
react 路由安裝及簡單使用
#安裝:npm i react-router-dom@5.0 - S(最新版本為6.0)導入:import { HashRouter as Router, Route, NavLink } from 'react-router-dom'路由配置:1.所有路由相關內容都應該放在a7f2cf15f06fbef780c6b2609731da81元件內
2.連結使用:84d4b047ccdf85451331b14361dc80f43.頁面使用:0dccb7ec2054063046f5737cc1627258#範例:簡單的路由跳轉
function App() { return (<Router> <div> //exact 精确匹配 <NavLink to='/' exact>首页</NavLink>| <NavLink to='/about' >关于</NavLink> </div> {/* 路由页面 */} <Switch> <Route path="/" exact component={Home}></Route> <Route path="/about" component={About}></Route> </Switch> </Router>) } export default App function Home() { return <div>首页页面</div> } function About() { return <div> 关于页面 </div> }二.路由傳參路由傳參形式1.連結傳參 8b9eab34eaa2f9166b7499d71b1429fd2.參數傳參 ad14d8ca4868d89fdf601e3800bad9923.參數取得 props.match.params.id 常用歷史操作的方法1.go()歷史跳躍記錄2.goBack(返回)3.push()新增記錄跳轉4.replace()替換記錄並跳轉範例:
import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom' // NavLink 会比 link自动添加一个active的class function App() { return (<Router> <div> <NavLink to='/' exact>首页</NavLink>| <NavLink to='/about' >关于</NavLink> <NavLink to='/produce/abc'>产品abc</NavLink> <NavLink to='/produce/123'>产品123</NavLink> </div> {/* 路由页面 */} <Switch> <Route path="/" exact component={Home}></Route> <Route path="/about" component={About}></Route> <Route path="/produce/:id" component={Produce}></Route> </Switch> </Router>) } export default App function Produce({ match, history, location }) { // console.log(match); return (<div> <h1>产品{match.params.id}</h1> <button onClick={() => history.goBack()}>返回</button> <button onClick={() => history.push('/')}>回到首页</button> </div>) } function Home() { return <div>首页页面</div> } function About() { return <div>关于页面 </div> }子路由傳參範例:
// 导入路由相关组件 // 导入哈希路由 别名router // Route路由页面 // NvaLink 导航链接 import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom' // NavLink 会比 link自动添加一个active的class function App() { return (<Router> <div> <NavLink to='/' exact>首页</NavLink>| <NavLink to='/about' >关于</NavLink> <NavLink to='/produce/abc'>产品abc</NavLink> <NavLink to='/produce/123'>产品123</NavLink> <NavLink to='/admin'>管理</NavLink> </div> {/* 路由页面 */} <Switch> <Route path="/" exact component={Home}></Route> <Route path="/about" component={About}></Route> <Route path="/produce/:id" component={Produce}></Route> <Route path="/admin" component={Admin}></Route> </Switch> </Router>) } export default App function NoMatch({ location, history }) { return (<div> <h1>404</h1> <p>你爹来咯</p> <p>{location.url}</p> <button onClick={history.goBack}>后退</button> <NavLink to={{ pathname: "/" }}>首页</NavLink> </div>) } function Admin() { return (<div style={{ "display": "flex" }}> <div style={{ width: "200px", boderRight: "1px solid #f0f0f0" }}> <NavLink to="/admin/dash">概览</NavLink><br /> <NavLink to="/admin/orderlist">列表</NavLink> </div> <div> <Route path="/admin/dash" component={Dash}></Route> <Route path="/admin/orderlist" component={OrderList}></Route> <Redirect path='/admin' to="/admin/dash"></Redirect> </div> </div>) } function Dash() { return (<div> 概览 </div>) } function OrderList() { return (<div> 订单列表 </div>) } function Produce({ match, history, location }) { // console.log(match); return (<div> <h1>产品{match.params.id}</h1> <button onClick={() => history.goBack()}>返回</button> <button onClick={() => history.push('/')}>回到首页</button> </div>) } function Home() { return <div>首页页面</div> } function About() { return <div>关于页面 </div> }推薦學習:《react影片教學》###
以上是react路由怎麼安裝的詳細內容。更多資訊請關注PHP中文網其他相關文章!