前言
React Router v5.1.x中的新功能的介绍
useParams
useParams可以帮助我们。在各层组件中，轻松访问router的params参数。
<= V5.0
在V5.1版本之前，我们需要通过props.match获取路由参数。对于更深层的组件还需要使用高阶组件withRouter。
const Detail = (props) => {
const { match: { params } } = props
const { id } = params
return (
<div>
params id: { id }
<DetailTips/>
</div>
)
}
// 需要使用高阶组件withRouter
const DetailTips = withRouter((props) => {
const { match: { params } } = props
const { id } = params
return (
<div>params id: { id }</div>
)
})
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path="/detail/:id" component={Detail}/>
</Switch>
</Router>
</div>
);
}
复制代码V5.1
在V5.1版本中，由于useParams的引入，我们可以轻松获取路由参数。对于更深层的组件，也不需要借助高阶组件withRouter，帮助我们拿到路由参数。
const Detail = () => {
const { id } = useParams()
return (
<div>
params id: { id }
<DetailTips/>
</div>
)
}
// 不需要使用高阶组件withRouter
const DetailTips = () => {
const { id } = useParams()
return (
<div>params id: { id }</div>
)
}
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path="/detail/:id" component={Detail}/>
</Switch>
</Router>
</div>
)
}
复制代码useLocation
useLocation可以帮助我们。在各层组件中，轻松获取location对象。在V5.1版本之前，我们需要使用props.location。而对于更深层的组件，还需要使用withRouter。
<= V5.0
const Detail = (props) => {
const { location: { pathname } } = props
return (
<div>
pathname: { pathname }
<DetailTips/>
</div>
)
}
// 需要使用高阶组件withRouter
const DetailTips = withRouter((props) => {
const { location: { pathname } } = props
return (
<div>pathname: { pathname }</div>
)
})
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path="/detail/:id" component={Detail}/>
</Switch>
</Router>
</div>
);
}
复制代码V5.1
const Detail = (props) => {
const { pathname } = useLocation()
return (
<div>
pathname: { pathname }
<DetailTips/>
</div>
)
}
// 不需要使用高阶组件withRouter
const DetailTips = (props) => {
const { pathname } = useLocation()
return (
<div>pathname: { pathname }</div>
)
}
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path="/detail/:id" component={Detail}/>
</Switch>
</Router>
</div>
);
}
复制代码useHistory
useHistory可以帮助我们访问history对象，进行编程式的导航。
const Home = () => {
return (
<div>Home</div>
)
}
const Detail = () => {
const history = useHistory()
return (
<div>
<button onClick={() => { history.push('/')}}>go home</button>
</div>
)
}
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/detail/:id" component={Detail}/>
</Switch>
</Router>
</div>
);
}
复制代码useRouteMatch
useRouteMatch，接受一个path字符串作为参数。当参数的path与当前的路径相匹配时，useRouteMatch会返回match对象，否则返回null。
useRouteMatch在对于一些，不是路由级别的组件。但是组件自身的显隐却和当前路径相关的组件时，非常有用。
比如，你在做一个后台管理系统时，网页的Header只会在登录页显示，登录完成后不需要显示，这种场景下就可以用到useRouteMatch。
<= V5.0
const Home = () => {
return (
<div>Home</div>
)
}
// Header组件只会在匹配`/detail/:id`时出现
const Header = () => {
return (
<Route
path="/detail/:id"
strict
sensitive
render={({ match }) => {
return match && <div>Header</div>
}}
/>
)
}
const Detail = () => {
return (
<div>Detail</div>
)
}
function App() {
return (
<div className="App">
<Router>
<Header/>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/detail/:id" component={Detail}/>
</Switch>
</Router>
</div>
);
}
复制代码V5.1
const Home = () => {
return (
<div>Home</div>
)
}
// Header组件只会在匹配`/detail/:id`时出现
const Header = () => {
// 只有当前路径匹配`/detail/:id`时，match不为null
const match = useRouteMatch('/detail/:id')
return (
match && <div>Header</div>
)
}
const Detail = () => {
return (
<div>Detail</div>
)
}
function App() {
return (
<div className="App">
<Router>
<Header/>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/detail/:id" component={Detail}/>
</Switch>
</Router>
</div>
);
}
复制代码其他
Link和NavLink组件的to属性支持函数
function App() {
return (
<div className="App">
<Router>
{/* 函数的返回值等于Link的to跳转的位置 */}
<Link to={
(location) => {
return `${location.pathname}?sort=age`
}
}>go</Link>
</Router>
</div>
);
}
复制代码
