Question

我正在尝试使用history.push('/about');从一个组件导航到另一个组件。但它不起作用的原因？这是我的代码

http://codepen.io/naveennsit/pen/RamvLj?editors=1011 我试图通过点击按钮

将一个组件移动到另一个组件

handleClick(){
 // alert('--');
  console.log(browserHistory)
  browserHistory.push('about');
  //this.props.history.push('/about');
}

它不会进入下一个组件..我正在尝试显示第二个组件

Answer 1

编辑：

我为我提供了本地代码。你的路线有点混乱。您的组件也不应该在其渲染功能中返回路径。相反，您可以在根目录中嵌套路由＆＃39; /＆＃39;路由并通过this.props.children在您的应用程序组件中呈现路径。

import { Router, Route, browserHistory, IndexRoute } from 'react-router'
import React from 'react';
import ReactDOM from 'react-dom'

class App extends React.Component {
  render() {
      return (
        <div>
          {this.props.children}
        </div>
      )
  }
}

class second extends React.Component {
  render() {
      return <p>second component</p>
  }
}

class first extends React.Component {
  handleClick(){
    console.log(browserHistory)
    browserHistory.push('about');
  }
  render() {
    return (
      <div>
        <label>first component</label>
        <button onClick={this.handleClick}>MOve to second page</button>
      </div>
    )
  }
}

const routes = (
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={first} />
      <Route path='about' component={second} />
    </Route>
  </Router>
)

ReactDOM.render(routes , document.getElementById('root'))

为什么history.push不能反应js？

1 个答案: