javascript - 如何在不重新渲染的情况下使用 React Router 向 url 添加哈希?
问题描述
我想在路由中打开一个 popin,我想在 url 中添加一个哈希。
例如在 onClick 之前 onClickhttps://www.example.com/home
之后https://www.example.com/home#send-me-an-email
很好,但是React Router 重新渲染了整个路由。
我对 React Router 做错了吗?让我们看看下面的代码(我简化了事情)
index.jsx
我和大家一样使用 BrowserRouter
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
const render = Component => {
ReactDOM.render(
<Router>
<Component />
</Router>,
document.getElementById('root')
);
};
render(App);
App.jsx
我正在使用 withRouter 因为我需要其他地方的历史记录和位置
import React from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './views/Home';
const App = ({ ...props }) => {
return (
<Header />
<section>
<Switch>
<Route exact path={"/"} component={() => <Home {...props} />} />
<Route path={"/home"} component={() => <Home {...props} />} />
</Switch>
</section>
<Footer />
);
};
export default withRouter(App);
Home.jsx
不幸的是,当我这样做时,this.props.history.push({ hash: 'send-me-an-email' })
它会重新渲染路由组件 Home,不好
...
render() {
<div>
<button onClick={() => this.props.history.push({ hash: 'send-me-an-email' })}>
Send me and email
</button>
<Popin
isOpened={this.state.isPopinOpened}
handleClose={() => this.props.history.push({ hash: '' })} />
</div>
}
...
如何不因为我向相同的 url 添加了哈希而重新渲染?干杯。
解决方案
只需依靠香草JS:
window.history.pushState("object or string", "Title", "/home#send-me-an-email");
这将添加一个哈希/路由,而无需渲染或重新加载任何内容。
推荐阅读
- boost-test - 观察测试失败消息
- reporting-services - 如何获得累积总和 SSRS 报告?
- azure - 如何在 Azure API 管理 Python SDK 中使用筛选器
- css - 我如何停止 prepos 来创建除 main.scss 之外的某些已编译的 scss
- android - React Native - 用于将我的应用程序提交到 Google Play 的未优化 APK
- ios - xib 显示空白框,即使我们在 Xcode 中有很多视图和其他设计
- vim - 摆脱 vim 的“netrw”插件
- c# - 如何检查gridviewrow中是否选中了复选框
- wpf - 用于填充 ListBox 的 LINQ to SQL 查询返回错误结果
- python - 为什么我得到 DatasetV1Adapter 返回类型而不是 tf.data.Dataset.from_tensor_slices(X) 的 TensorSliceDataset