passing props within react router with history object

Question

import createBrowserHistory from 'history/
import appState from './AppState'

const customHistory = createBrowserHistory()
ReactDOM.render(
  <Router>
    <div>
      <Route path="/submit" component={Submit} history={history}/>
    </div>
  </Router>,
  document.getElementById('root')
);

Notice: if I add appState like other properties; there is not property such as appState in Submit component,

if I use this;

<Route path="/submit" render={routeProps=> <Submit appState={appState}/> history={history}/>

appState pass fine but this time history object is missing, what is proper way of doing this? appState is just mobx class instance.

EDITED: I found a "weird" solution. i changed route element to this;

 <Route path="/submit" render={routeProps=> <Submit appState={appState}/> history={history}/>

then I am able to access same history object via this._reactInternalInstance._context.router.history.push('/home') before I made this change i was able to use it as this.props.history.push('/home')

if I leave this as it works fine but its annoying getting this history object with this way

You should pass `history` object to `router`, not to `route`. Correct me if I'm wrong. — degr, Jul 14 '17 at 12:44
Maybe in common yeah but in this sample I am able to use it like "this.props.history.pushState('/previousPage')" so my issue is not cover wit useage of history — TyForHelpDude, Jul 14 '17 at 12:46
check this: https://stackoverflow.com/questions/43469071/react-react-router-dom-pass-props-to-component/43469277#43469277 — Mayank Shukla, Jul 14 '17 at 13:08

Hana Alaydrus · Accepted Answer · 2017-07-14T13:03:48.807

2

I think it's right, better for you to put the history in Router not Route.

See below answer, this one work well on me. You still can use history.push in this answer. Sometimes history.push didn't redirect the page. if this happen to you, you can put location.href = location.href to refresh the page.

https://stackoverflow.com/a/42679052/7765396

edited Jul 14 '17 at 13:03

answered Jul 14 '17 at 12:58

Hana Alaydrus

2,225
16
19

hi, thanks for answer but as I mention in comment section thats got nothing with my issue here, – TyForHelpDude Jul 14 '17 at 13:01

score 1 · Answer 2 · answered Jul 14 '17 at 14:29

You are doing wrong, I'm sure in it. Browser history is a singleton object, so you can export it from module. Look here:

//history.js:
import createBrowserHistory from 'history/
export default createBrowserHistory();

//Submit.js
import history from "myapp/history"
export default class Submit extends React.Component {
   ...
}

//MyRouter.js
import Submit from './myapp/Submit'
import appState from './AppState'
ReactDOM.render(
  <Router>
    <div>
      <Route path="/submit" component={Submit}/>
    </div>
  </Router>,
  document.getElementById('root')
);

yeah actually I suppose to use customHistory(instance of createBrowserHistory), that was all about the issue here :D — TyForHelpDude, Jul 14 '17 at 14:51

passing props within react router with history object

2 Answers2