React-Router 非Route组件监听location变化
2021/10/31 23:15:30
本文主要是介绍React-Router 非Route组件监听location变化,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
react-router-dom
https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md
对于location的变化, 不论是 hashtag方式, 或者是 通过pushstate改变urlpath 的方式,
这种情况下, 只有使用 Route 方式的 引用的 组件, 才能感知 路径变化(location对象), 加载此组件。
import { render } from "react-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import App from "./App"; import Expenses from "./routes/expenses"; import Invoices from "./routes/invoices"; const rootElement = document.getElementById("root"); render( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="expenses" element={<Expenses />} /> <Route path="invoices" element={<Invoices />} /> </Routes> </BrowserRouter>, rootElement );
例如:
https://reactrouter.com/web/api/history/history-is-mutable
Route引用的组件 Comp 中能够在props中拿到 location 对象。
The history object is mutable. Therefore it is recommended to access the
location
from the render props of<Route>
, not fromhistory.location
. This ensures your assumptions about React are correct in lifecycle hooks. For example:
class Comp extends React.Component { componentDidUpdate(prevProps) { // will be true const locationChanged = this.props.location !== prevProps.location; // INCORRECT, will *always* be false because history is mutable. const locationChanged = this.props.history.location !== prevProps.history.location; } } <Route component={Comp} />;
Router模式
BrowserRouter
https://reactrouter.com/web/api/BrowserRouter
A
<Router>
that uses the HTML5 history API (pushState
,replaceState
and thepopstate
event) to keep your UI in sync with the URL.
<BrowserRouter basename={optionalString} forceRefresh={optionalBool} getUserConfirmation={optionalFunc} keyLength={optionalNumber} > <App /> </BrowserRouter>
https://javascript.ruanyifeng.com/bom/history.html#toc6
var stateObj = { foo: 'bar' }; history.pushState(stateObj, 'page 2', '2.html');
HashRouter
https://reactrouter.com/web/api/HashRouter
A
<Router>
that uses the hash portion of the URL (i.e.window.location.hash
) to keep your UI in sync with the URL.
<HashRouter basename={optionalString} getUserConfirmation={optionalFunc} hashType={optionalString} > <App /> </HashRouter>
https://www.cnblogs.com/xiaonian8/p/13764821.html
componentDidMount(){ window.addEventListener('hashchange', this.routerEvent); } componentWillUnmount(){ window.removeEventListener('hashchange',this.routerEvent); } routerEvent = (e)=>{ // e.target.location.hash.replace("#","") // 去掉#就能获取即将跳转的那个路由的url了 }
问题:对于非Route引用的组件是否也能感知location变化?
答案是肯定的:
https://reactrouter.com/web/api/location
location数据结构:
{ key: 'ac3df4', // not with HashHistory! pathname: '/somewhere', search: '?some=search-string', hash: '#howdy', state: { [userDefined]: true } }
如下四种情况, 可以使用感知location变化。
The router will provide you with a location object in a few places:
- Route component as
this.props.location
- Route render as
({ location }) => ()
- Route children as
({ location }) => ()
- withRouter as
this.props.location
使用withRouter给非Route控制组件,添加location监测能力
https://reactrouter.com/web/api/withRouter
对于定义的组件, 使用withRouter对其进行包裹,生成新的组件。
You can get access to the
history
object’s properties and the closest<Route>
'smatch
via thewithRouter
higher-order component.withRouter
will pass updatedmatch
,location
, andhistory
props to the wrapped component whenever it renders.
import React from "react"; import PropTypes from "prop-types"; import { withRouter } from "react-router"; // A simple component that shows the pathname of the current location class ShowTheLocation extends React.Component { static propTypes = { match: PropTypes.object.isRequired, location: PropTypes.object.isRequired, history: PropTypes.object.isRequired }; render() { const { match, location, history } = this.props; return <div>You are now at {location.pathname}</div>; } } // Create a new component that is "connected" (to borrow redux // terminology) to the router. const ShowTheLocationWithRouter = withRouter(ShowTheLocation);
在组件中监听 pushState 引起的路径变化
https://www.cnblogs.com/xiaonian8/p/13764821.html
react router自带的history.listen
let UNLISTEN; class Client extends React.Component { ..., componentDidMount(){ // UNLISTEN变量用来接收解绑函数 UNLISTEN = this.props.history.listen(route => { console.log(route); }); } componentWillUnmount(){ UNLISTEN && UNLISTEN(); // 执行解绑 } }
这篇关于React-Router 非Route组件监听location变化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程