安装
npm i react-router-dom -S
导入路由需要的组件
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
【常用路由组件如下：】
- BrowserRouter as Router
浏览器路由 别名为Router - Link导航 to切换的页面
- Route路由页面--path对应链接component对应组件
- BrowserLink
带active激活的class路由连接
简单路由代码
import React, { Component } from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
// 导入子组件
class App extends Component {
render() {
return (
<div className="App" >
<Router>
<div> <Link to="/">首页</Link> | <Link to="/about">关于</Link> </div>
<hr/>
<Route path="/" exact component={Home}></Route>
<Route path="/about" component={About}></Route>
</Router>
</div>
);
}
}
function Home(){
return (<h1>我是首页</h1>);
}
function About(){
return (<h1>我是关于</h1>);
}
export default App;
路由的参数
- 步骤01：定义指令Link指令
<Link to="/produce/123">产品123</Link> <Link to="/produce/abc">产品abc</Link> - 步骤02:定义路由
<Route path='/produce/:id' component={Produce}></Route> - 步骤03:定义组件-获取路由参数
function Produce({match}){ return (<h1>我是产品:{match.params.id}</h1>); }
[match 是组件默认传递的参数， match.paras 组件路由参数对象, 还有 history对象和location对象]
子路由
- 步骤01：导入NavLink
import {BrowserRouter as Router,Route,Link,NavLink} from 'react-router-dom' - 步骤02：定义指令NavLink
<NavLink to="/detail">详情</NavLink> - 步骤03：定义主路由
<Route path="/detail" component={Detail}></Route> - 步骤04：编写主路由
function Detail({location,match}){
return (
<div>
<div><NavLink to={match.url+'/arg'}>参数</NavLink> | <NavLink to={match.url+'/com'}>评论</NavLink> | </div>
<hr/>
<Route path={match.url+'/arg'} component={Arg}></Route>
<Route path={match.url+'/com'} component={Com}></Route>
</div>);
}
[match.url 获取当前匹配的主路由地址]
- 步骤05：编写子路由
function Arg(){
return (<h1>我是Arg </h1>);
}
function Com(){
return (<h1>我是com</h1>);
}
404页面配置和Switch组件
[Switch能让匹配的路由唯一]
[定义404，要写在最后]
[location 当前的地址]
[pathname 地址栏的信息]
- 步骤01：导入Switch
import {BrowserRouter as Router,Route,Link,Switch,NavLink,Redirect} from 'react-router-dom' - 步骤02：定义路由
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/produce/:id" component={Produce}></Route>
<Route path="/detail" component={Detail}></Route>
<Route component={NoMatch}></Route>
</Switch>
- 步骤03：编写404路由
function NoMatch({location}){ return (<h1>页面没有找到{location.pathname}</h1>); }
路由重定向
- 导入重定向组件Redirect
- 重新编写主路由
function Detail({location,match}){
return (<div>
<div><NavLink to={match.url+'/arg'}>参数</NavLink> | <NavLink to={match.url+'/com'}>评论</NavLink> | </div>
<hr/>
<Switch>
<Route path={match.url+'/arg'} component={Arg}></Route>
<Route path={match.url+'/com'} component={Com}></Route>
<Redirect from={match.url} to={match.url+'/arg'}/>
</Switch>
</div>);
}
路由组件的参数
-
history
goBack() 返回
goForward() 前进
push('/') 切换跳转
replace 跳转不留历史记录
-
location 地址栏信息
pathname路径
-
match
params路由参数
url 配置的地址
路由如何传参
props
