无法读取属性'pushState'的未定义

Cannot read property 'pushState' of undefined

本文关键字：未定义 pushState 读取 属性      更新时间：2023-09-26

React路由器的配置很简单。我还有一个基本上用…包装的，这是有效的。但这一个没有（当然，我试着用不同的实现，就像这篇文章和许多其他文章的答案中建议的那样）

控制台错误是这篇文章的标题。使用ES6，并使用基于哈希的路由对路由器v.1进行反应。

我读了很多的文章，对于实现简单的路由来说太没有必要了，现在几乎讨厌react and react路由器。请帮忙。

    componentWillReceiveProps() {
       this.contextTypes = {
          history: React.PropTypes.object
       }
    },
    _handleRoute(e) {
       e.preventDefault()
       this.history.pushState(null, `/somepath`);
    },
    render() {
        return(
          <div onClick={this._handleRoute}>
            Some Content.
          </div>
        );
      }

或：

render() {
        return(
          <div>
            <Link to={`/somepath`}> link </Link>
          </div>
        );
      }

React Router v1:

历史对象中有一个pushState方法。

首先，分配给路由器的组件必须给子组件pushState方法作为函数道具：

//Router Component
render ()
  return (
    <SomeComponent changeRoute={this.props.history.pushState}
  )

然后，在我想更改函数中路由的组件中，我只需执行以下操作：

//SomeComponent
onClick() {
  this.props.changeRoute(null, 'somepath', {query: "something"});
}

React Router v.2

import {browserHistory} from 'react-router';
//SomeComponent
browserHistory.push('somepath');

您得到的错误表明未定义context.history。

很可能，这是因为您没有在顶级渲染<Router>或等效组件。试着从React Router提供的一些示例开始，并对它们进行修改以适应您的特定用例。

我已经很久没有问这个问题了，但我想我会回答我发现它有效的最简单、最基本的答案，那就是：

location.hash: '/some-route?sheeps=black';

如果有人有更好、更"反应"的方式来做这件事；请回答。我仍然不认为这个答案是正确的。

用新的React Rout和Update React更新应答截止日期：2017年7月29日

所有版本：

"history": "^4.6.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"

我的路线看起来像…

 import {BrowserRouter,Route,Link} from 'react-router-dom'; // for BrowserRouter rout
<BrowserRouter>
        <div>
            <Route exact path='/' component={Layout}></Route>
            <Route path='/about' name="about" component={about}> </Route>
            <Route path='/protfolio' name="protfolio" component={protfolio}></Route>
        </div>
    </BrowserRouter >

有关新React Rout Quick Start的更多详细信息

对于链接查看或导航查看

    <Link to="/about">Check rout link protfolio</Link>
     <Link to="/protfolio">Check rout link protfolio</Link>
   <button onClick={this.navigate.bind(this)}>button binf</button>

最终外观：

   navigate(){
        this.props.history.replace('/', null);
    }

如果采取console.log(this.props.history);然后你的浏览器控制台你得到它…

push:function push(path, state)

所以不能像this.props.history.replace(null, '/'); 那样使用它

因为这里的路径为空，所以这是不可能的。

在react-router-dom v6中，您必须使用useNavigate（）

像这样：

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(`/cart/${id}?qty=${qty}`)

通过这种方式，您可以导航到另一个url

相关文章：