不确定如何使用react-router v4实现history.push
React Router是一个用于构建单页面应用的库，它提供了一种在React应用中管理路由的方式。React Router v4是React Router的最新版本，它引入了一些新的概念和API。
要使用React Router v4实现history.push，你需要按照以下步骤进行操作：
- 首先，确保你已经安装了React Router v4。你可以使用npm或yarn来安装它：
npm install react-router-dom
或
yarn add react-router-dom
- 在你的应用程序的根组件中，引入React Router的相关组件和函数：
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { createBrowserHistory } from 'history';
- 创建一个history对象，用于管理路由历史记录：
const history = createBrowserHistory();
- 在根组件中使用Router组件包裹你的应用程序：
const App = () => (
<Router history={history}> {/* 在这里定义你的路由 */} </Router>);
- 在需要进行路由跳转的地方，使用history.push方法：
const MyComponent = () => {
const handleClick = () => { history.push('/path'); // 这里是你要跳转的路径 }; return ( <button onClick={handleClick}>跳转</button> );};
通过以上步骤，你就可以使用React Router v4的history.push方法实现路由跳转了。
React Router v4的优势在于其简洁的API和灵活的路由配置方式。它可以帮助你构建复杂的路由结构，并提供了很多有用的功能，如嵌套路由、路由参数、重定向等。它适用于各种类型的单页面应用，包括Web应用、移动应用等。
腾讯云提供了云服务器CVM、云数据库MySQL、云存储COS等产品，可以帮助你构建和部署基于React Router v4的应用。你可以在腾讯云官网上找到相关产品的介绍和文档。
参考链接：
- React Router v4官方文档：https://reactrouter.com/web/guides/quick-start
- 腾讯云官网：https://cloud.tencent.com/
相关·内容
我正在使用i18-next库在我的应用程序中转换语言。所以不需要重新加载页面就可以完成。语言转换通过以下方式完成：
render() {
const toggle = lng => i18n.changeLanguage(lng);
return (
<a href="javascript:void(0)" onClick={()=>{ toggle();}}></a>
)
我会做这样的功能:一旦语言被切换，将一个语言param添加到URL中。因此，一旦发生了变化，应该是这样的：www.web
浏览 3提问于2017-11-03得票数 3
回答已采纳
当用户重新加载或引用当前页面时，我想将用户重定向到菜单页面。
Menu.js：
import React from "react";
import { useHistory } from "react-router-dom";
export default function Menu() {
const history = useHistory();
const handleClick = () => {
history.push("/myComponent");
};
return (
<div&g
浏览 138提问于2021-02-18得票数 1
回答已采纳
我试图链接到我的应用程序中的某个地方--在appBar/header中使用react路由器-dom，该应用程序在整个应用程序中都是持久化的。当我试图在标头组件中使用TypeError时，我一直得到“RRD : history是未定义的”。
我已经玩了好几个小时了，但我没有得到任何进展。由于酷热，我无法直截了当地思考，而且在我的搜索中我显然是在寻找错误的答案。到目前为止，我想出的最好的解决方案是让每个组件在顶部包含标头组件，但这并不理想。我知道我一定错过了一些简单的东西，因为这不可能是一个不寻常的模式。
演示代码
节点内容
npx create-react-app rdr-header
浏览 6提问于2021-05-31得票数 0
回答已采纳
我试图理解BrowserRouter和react-router-dom (v5)包的Router之间的区别，以及它对下面的示例有什么不同。
文件上说：
BrowserRouter A，它使用HTML5历史API (pushState、replaceState和popstate事件)使UI与URL保持同步。
来源：
路由器，所有路由器组件的公共低层接口.通常，应用程序将使用高级路由器之一: BrowserRouter、HashRouter、MemoryRouter、NativeRouter、StaticRouter。
来源：
据我所知，我应该在我的HTML5浏览器应用程序中使用H
浏览 0提问于2019-06-21得票数 64
8回答
在单击按钮时，我将通过执行history.push()更改URL
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
.
. some code
.
history.push(`/share/${objectId}`)
并且希望Route中提到的该URL的组件会呈现出来，但这并没有发生。不过，在刷新时，该组件将按预期的方式呈现。但是我不明白为什么当URL改变的时候它就不呈现了。我尝试过将组件包装在withRouter中。
import
浏览 0提问于2019-03-12得票数 11
回答已采纳
3回答
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Register from './register/register';
import Login from './login/login';
import {
BrowserRouter as Router,
Route,
NavLink
} from 'react-router-dom';
import c
浏览 6提问于2017-07-26得票数 1
我已经根据这篇文章的实现了createBrowserHisotry，但是只有当我将配置属性设置为forceRefresh: true时，它才会重定向。如果不设置任何配置属性，url将更改为推送的url，但页面不会重定向。为什么？
INDEX.JS
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./components/App";
import { Router } from &#
浏览 39提问于2019-03-28得票数 4
回答已采纳
我看过很多关于这个问题的答案，但还是想不出 我正在使用 `" "react-router": "^5.2.1",
"react-router-dom": "^5.2.1",` // app.js import history from "./history";
import { Router } from 'react-router';
export const App = () => {
return (
<ReduxProvider store={s
浏览 30提问于2021-10-06得票数 0
因此，我试图在组件中使用history.push('/path')。我的布景是这样的：
App.js
import { Router, Switch, Route } from 'react-router-dom';
// History
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
function App() {
return (
<Router history={history}&g
浏览 3提问于2021-02-04得票数 0
回答已采纳
我有3个组件，我想使2个按钮主页和关于(点击后将重定向到相应的主页(路径'/')或关于(路径'/ ABOUT ') )。Component NOTFOUND仅在路径错误时显示。但是，当我尝试点击主页或关于它时，总是显示NOTFOUND，尽管url已经变成了'/‘或'/ ABOUT’。下面是详细的代码，我必须做什么才能让它正常工作。TKS全部
import React, { useState } from 'react';
import {Router, Route, Switch} from 'react-router-d
浏览 14提问于2021-06-11得票数 2
我正在尝试在redux操作中将用户重定向到'/‘路由。但我可以看到浏览器中的路由正在更改，但组件没有呈现(它保持在相同的视图中)。 我的操作看起来像这样： import history from '../../history';
export const logoutUser = () => dispatch => {
api.logout();
// redirect
history.push('/');
dispatch({ type: TYPES.LOGOUT_USER });
}; 我的包含路由的组件如下所示：
浏览 35提问于2019-03-09得票数 1
我曾经能够在<= v4中将历史传递给React路由器：
import { Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
<Router history={history}>
<App />
</Router>
编辑:我错了，我以前用的是Router，而不是需要的BrowserRouter。BrowserRouter可能
浏览 2提问于2020-02-04得票数 4
为什么Dashboard组件在history.push("/dashboard")将url更改为/dashboard后未呈现
，如您所见，我必须手动单击刷新按钮才能触发重呈现。
index.js
import ReactDOM from "react-dom";
import Router from "./Router";
const rootElement = document.getElementById("root");
ReactDOM.render(
<Router />,
rootElem
浏览 2提问于2021-05-19得票数 1
回答已采纳
为什么要看这个？我正在使用ReacJS，我看不出出了什么问题。
My history.js:
import { createBrowserHistory } from 'history'
export default createBrowserHistory
My App.js:
import React from 'react'
import { Router } from 'react-router-dom'
import Routes from './routes'
import history from './
浏览 4提问于2021-05-14得票数 1
现在我有一个History模块，它允许我使用历史，甚至在react组件之外也是如此：
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
然后在App.jsx中直接使用这个历史记录
import { Router } from 'react-router-dom';
...
<Router history={history}>...</Router>
我可以在任何地方导入和使用相同的历史对象。即使在自定义帮助之外的任
浏览 7提问于2021-07-15得票数 12
回答已采纳
我读过很多关于react的东西--路由器v4和npm历史库，到目前为止，似乎都没有对我有帮助。
在使用history.push()方法更改url时，我的代码正在按预期的方式工作，直到它应该导航并执行简单的重定向。URL正在更改为指定的路由，但不执行按钮按下的重定向操作。谢谢你，还在学习反应路由器.
我希望按钮按下可以在不使用{forceRefresh:true}的情况下进行简单的重定向，然后重新加载整个页面。
import React from 'react';
import createBrowserHistory from 'history/createBrowse
浏览 25提问于2017-03-22得票数 87
回答已采纳
2回答
我尝试了大约5-7种不同的解决方案，关于重定向和历史不工作的反应路由器。这是创建-反应-应用程序代码：
index.js
import { Router} from 'react-router-dom';
import history from './History';
ReactDOM.render(<Router history={history}><App /></Router>, document.getElementById('root'));
History.jsx
import {createBr
浏览 5提问于2019-12-24得票数 0
我已经安装了应用程序，就像在文档中一样：
第一步
...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
...
const history = createBrowserHistory()
const store = createS
浏览 0提问于2018-08-17得票数 5
回答已采纳
2回答
用render替换了onEnter之后，我更改了代码以匹配路由器的v4规格。重点是为了防止在记录代码中遗漏的in.What时显示/signup页面。
import React from 'react';
import ReactDOM from 'react-dom';
import {Meteor} from 'meteor/meteor';
import {BrowserRouter, Route, Redirect, Switch} from 'react-router-dom';
import browserHistory
浏览 0提问于2017-07-14得票数 0
1回答
在我的react应用程序中，我使用useHistory钩子重定向到我的Home组件。为什么useHistory是未定义的，我该如何解决这个问题？ App.js import 'bootstrap/dist/css/bootstrap.css'
import React from "react";
import { Button } from 'react-bootstrap';
import { BrowserRouter, Route, useHistory} from 'react-router-dom';
import
浏览 12提问于2020-12-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
