现代的前端应用大多都是 SPA(单页应用程序),也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。
yarn add react-router-dom
react-router-dom
这个包提供了三个核心的组件import { HashRouter, Route, Link } from 'react-router-dom'
HashRouter
包裹整个应用,一个项目中只会有一个Router<Router>
<div className="App">
// … 省略页面内容
</div>
</Router>
<Link to="/first">页面一</Link>
<Link to="/two">页面二</Link>
Route
指定路由规则// 在哪里写的Route,最终匹配到的组件就会渲染到这
<Route path="/first" component={First}></Route>
HashRouter
和 BrowserRouter
localhost:3000/#/first
)
localhost:3000/first
)
最佳实践
import { HashRouter as Router, Route, Link } from 'react-router-dom'
Link
组件最终会渲染成a标签,用于指定路由导航
Link
组件无法实现导航的高亮效果NavLink
组件,一个更特殊的Link
组件,可以用用于指定当前导航高亮
active
Route
包裹在一个Switch
组件中
Switch
组件中,不管有多少个路由规则匹配到了,都只会渲染第一个匹配的组件
Switch
组件非常容易的就能实现404错误页面的提示
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/user" component={User}/>
<Route component={NoMatch}/>
</Switch>
Route
就是一个组件,可以在任意想配置的地方进行配置
// 通过/home可以匹配Home父组件 再通过/list匹配子组件
<Route path="/home/list" component={List} />
class Login extends Component {
handleLogin = () => {
// ...
this.props.history.push('/home')
}
render() {...省略其他代码}
}
:id
的方式来配置动态的路由参数// 可以匹配 /users/1 /users/2 /users/xxx
<Route path="/users/:id" component={Users} />
props
可以接收到路由的参数render(){
console.log(this.props.match.params)
}
<Route path="/users/:id" component={Users} />
props
可以接收到路由的参数render(){
console.log(this.props.match.params)
}