Question

从es2015升级到2017年版本ive得到了我所有的浏览器历史。停止工作。

在互联网上尝试了几乎所有的东西后，我仍然无法让它发挥作用。

代码：

import { goBack } from 'react-router-redux'      

let Popup = () => {
  <a onClick={ goBack }></a>
}

用于使用browserHistory.goBack的完全相同的东西。 goBack反而只是什么也没做。

  <Provider store={store}>
    <Router history={browserHistory}>
      <MainLayout>
        <Route exact path="/" component={Home}  />
        <Popup>
            <Route path="/login"    component={LoginContainer} />
        </Popup>
      </MainLayout>
    </Router>
  </Provider>

Popup有goBack按钮。要显示登录屏幕，我使用主屏幕上的链接。

二手版本：

"react-redux": "^5.0.3",
"react-router-dom": "^4.0.0",
"react-router": "^4.0.0",
"react-router-redux": "^4.0.8",

创造历史：

const browserHistory = createHistory();
const historyMiddleware = routerMiddleware(browserHistory);
const middleware = [ thunk, historyMiddleware];
const store = createStore(reducers, preloadedState, applyMiddleware(...middleware));

分别使用applyMiddleware将历史中间件添加到商店中。

我做错了什么？

Answer 1

您可以使用历史记录对象通过其几种方法（例如history.goBack）更改应用程序的当前位置，并将历史记录对象作为prop传递给Router组件的子项。所以你可以做的是在你的Popup组件中：

let Popup = ({children}) => {
  <button onClick={ children.props.history.goBack }></button>
}

但是，props.history和context.history已被弃用。您应该使用context.router

UPDATE :: 使用context.router

class Popup extends React.Component {
   render(){
     <button onClick={ this.context.router.goBack }></button>
   }
}

Popup.contextTypes = {
  router: React.PropTypes.object.isRequired
};

export default Popup

更新2 ::

我的测试应用程序设置

//Index.js
import { createDevTools } from 'redux-devtools'
import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor'

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

import * as reducers from './reducers'
import { App, Home, Foo, Bar } from './components'

const reducer = combineReducers({
  ...reducers,
  routing: routerReducer
})

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
    <LogMonitor theme="tomorrow" preserveScrollTop={false} />
  </DockMonitor>
)

const store = createStore(
  reducer,
  DevTools.instrument()
)
const history = syncHistoryWithStore(browserHistory, store)
ReactDOM.render(
  <Provider store={store}>
    <div>
      <Router history={history}>
        <Route path="/" component={App}>
          <IndexRoute component={Home}/>
          <Route path="foo" component={Foo}/>
          <Route path="bar" component={Bar}/>
        </Route>
      </Router>
      <DevTools />
    </div>
  </Provider>,
  document.getElementById('mount')
)

//App.js
import React from 'react'
import { Link, browserHistory } from 'react-router'

class App extends React.Component{
  render(){
  return (
    <div>
      <header>
        Links:
        {' '}
        <Link to="/">Home</Link>
        {' '}
        <Link to="/foo">Foo</Link>
        {' '}
        <Link to="/bar">Bar</Link>
        <button onClick={this.context.router.goBack}>Back</button>}
      </header>
    </div>
  )
  }
}

App.contextTypes = {
  router: React.PropTypes.object.isRequired
};

export default App

使用react-router-redux的goBack函数

1 个答案: