reactjs 无法读取未定义的属性“pushState”

kpbwa7wx  于 2022-12-22  发布在  React
关注(0)|答案(5)|浏览(158)

我有一个简单的React路由器配置。我有另一个基本上用... Package 的配置,它工作。但这个不工作(当然我尝试使用不同的实现,如this post和许多其他的答案中建议的)。
控制台错误是这篇文章的标题。使用ES6,和react-router v.1与基于哈希的路由。
我读了很多的文章,对于简单路由的实现来说太不必要了,现在几乎讨厌react和react-router了。请帮助我。

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>
        );
      }
wkftcu5l

wkftcu5l1#

React路由器v1:

历史对象中的pushState方法就是为此创建的。
首先,为路由器分配的组件必须将pushState方法作为函数prop提供给子组件:

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

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

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

React路由器第2版

import {browserHistory} from 'react-router';

//SomeComponent

browserHistory.push('somepath');
cfh9epnr

cfh9epnr2#

您得到的错误表明context.history没有定义。
这很可能是因为您没有在顶层呈现<Router>或等效组件。尝试从React Router提供的一些示例开始,并修改它们以适合您的特定用例。

o7jaxewo

o7jaxewo3#

我已经很久没有问过这个问题了,但我想我应该回答一个最简单最基本的答案,我发现它是有效的,那就是:

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

如果有人有一个更好的,更“React的方式”做这件事;请回答。我还是不认为这个答案正确。

lh80um4z

lh80um4z4#

使用新的React路由更新回答并更新React截止日期:* * 二零一七年七月二十九日**
所有版本:

"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 >

关于New 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);然后你的浏览器控制台你得到它...

    • 一米一米一**

所以不能像this.props.history.replace(null, '/');那样使用它
因为这里的路径为空,所以这是不可能的。

olmpazwi

olmpazwi5#

react-router-dom v6中,您必须使用useNavigate()
像这样:

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

navigate(`/cart/${id}?qty=${qty}`)

这样你可以导航到另一个url

相关问题