React-router 的基本使用
- Link 和NavLink 都是以a 标签的形式呈现
- 默认是模糊匹配, exact 属性表示精准匹配
- HashRouter Hash 模式
- BrowserRouter History 模式
1. Link
import { HashRouter, BrowserRouter, Switch, NavLink, Link, Route, Redirect } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
import User from './pages/user';
import NoMatchfrom './pages/noMatch';
<div>
<BrowserRouter>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
<Link to="/profile">我的</Link>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/profile" component={Profile}/>
</BrowserRouter>
</div>
2. NavLink
用于添加样式
// NavLink 的使用
// 被点击的NavLink 默认具有 active 类名
<NavLink exact to="/" activeStyle={{ color: "red" }}>首页</NavLink>
<NavLink to="/about" activeStyle={{ color: "red" }}>关于</NavLink>
<NavLink to="/profile" activeStyle={{ color: "red" }}>我的</NavLink>
// activeClassName 属性可以修改NavLink 的默认类名
<NavLink exact to="/" activeClassName="link-active">首页</NavLink>
<NavLink to="/about" activeClassName="link-active">关于</NavLink>
<NavLink to="/profile" activeClassName="link-active">我的</NavLink>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/profile" component={Profile}/>
3. Switch
Switch 表示从上往下对Roue 进行匹配, 如果匹配到就不再向下匹配
<NavLink exact to="/" activeClassName="link-active">首页</NavLink>
<NavLink to="/about" activeClassName="link-active">关于</NavLink>
<NavLink to="/profile" activeClassName="link-active">我的</NavLink>
<NavLink to="/user" activeClassName="link-active">用户</NavLink>
<Switch>
<Route exact path="/" component={ Home }/>
<Route path="/about" component={ About }/>
<Route path="/profile" component={ Profile }/>
// 动态路由
<Route path="/:id" component={ User }/>
// 默认路由 在都没匹配的情况下匹配默认路由
<Route component={ NoMatch }/>
</Switch>
4. Redirect
<Route path="/login" component={ Login }/>
export default class user extends PureComponent {
constructor(props) {
super(props);
this.state = {
isLogin: true;
}
}
render() {
return this.state.isLogin ? (
<div>
<h2>User</h2>
</div>
) : <Redirect to="/login">
}
}
5. 路由嵌套
export default class About from PureComponent {
render() {
return (
<div>
<NavLink exact to="/about">企业历史</NavLink>
<NavLink exact to="/about/culture">企业文化</NavLink>
<NavLink exact to="/about/contact">关于我们</NavLink>
<Switch>
<Route exact path="/about" component={AboutHistory}/>
<Route exact path="/about/culture" component={AboutCulture}/>
<Route exact path="/about/contact" component={AboutContact}/>
</Switch>
</div>
)
}
}
6. 手动路由跳转
// 当前About 组件是通过路由进行创建并进行渲染的组件
export default class About from PureComponent {
render() {
return (
<div>
<NavLink exact to="/about">企业历史</NavLink>
<NavLink exact to="/about/culture">企业文化</NavLink>
<NavLink exact to="/about/contact">关于我们</NavLink>
<button onClick={ e => this.jumpTo() }>手动路由跳转</button>
<Switch>
<Route exact path="/about" component={AboutHistory}/>
<Route exact path="/about/culture" component={AboutCulture}/>
<Route exact path="/about/contact" component={AboutContact}/>
<Route path="/about/jumpTo" component={ JumpTo }/>
</Switch>
</div>
)
}
jumpTo() {
// 由路由创建并渲染的组件具有这些属性
// this.props.history
// this.props.location
// this.props.match
this.props.history.push("/about/jumpTo");
}
}
- 通过非Route 方式渲染出来的组件,想要使用history、location、march 这些属性需要通过withRouter() 这个高阶组件
import { widthRouter } from 'react-router-dom'
export default withRouter(About)
<BrowserRouter>
<About/>
</BrowserRouter>
7. 动态路由
export default class Detail from PureComponent {
render() {
const match = this.props.match;
return (
<div>
<h2>Detail: { match.params.id } </h2>
</div>
)
}
}
export default class About from PureComponent {
render() {
const id = "abc";
return (
<div>
<NavLink exact to={`/detail/${id}`}>详情</NavLink>
<Switch>
<Route exact path="/detail/:id" component={AboutHistory}/>
</Switch>
</div>
)
}
}