I am trying to pass props from one ponent to another via react-router.When I try to get that props from child ponent, I got this message TypeError: this.props.params.appState is undefined . Here is my code:

Tracks.jsx:

import { observable } from 'mobx';


export default class Tracks {
    @observable tracks = [];

}

app.jsx:

.......
import Tracks from './store/Tracks.jsx';

......
const appState = new Tracks();

ReactDOM.render(
    <Router history={browserHistory} >
        <Route path="/" ponent={Login} />
        <Route path="/dashboard" onEnter={authRequired} ponent={Main}>
            <Route path="album/create" ponent={AlbumCreate} />
            <Route path="album/:id" ponent={Album} appState={appState}/>
            <Route path="album/:id/upload"  ponent={Upload} />
        </Route>
    </Router>,
    document.getElementById('app')
);

Album.jsx:

.....
@observer
export default class Album extends React.Component {

    constructor(props) {
        super(props);
    }
ponentDidMount () {
        console.log(this.props.params.appState.tracks);
    }

.....

I am trying to pass props from one ponent to another via react-router.When I try to get that props from child ponent, I got this message TypeError: this.props.params.appState is undefined . Here is my code:

Tracks.jsx:

import { observable } from 'mobx';


export default class Tracks {
    @observable tracks = [];

}

app.jsx:

.......
import Tracks from './store/Tracks.jsx';

......
const appState = new Tracks();

ReactDOM.render(
    <Router history={browserHistory} >
        <Route path="/" ponent={Login} />
        <Route path="/dashboard" onEnter={authRequired} ponent={Main}>
            <Route path="album/create" ponent={AlbumCreate} />
            <Route path="album/:id" ponent={Album} appState={appState}/>
            <Route path="album/:id/upload"  ponent={Upload} />
        </Route>
    </Router>,
    document.getElementById('app')
);

Album.jsx:

.....
@observer
export default class Album extends React.Component {

    constructor(props) {
        super(props);
    }
ponentDidMount () {
        console.log(this.props.params.appState.tracks);
    }

.....

• javascript
• reactjs
• react-router

• Could you check what contains this.props ? – Mario Santini Commented Jul 6, 2016 at 14:28
• As I can see error says TypeError: this.props.params.appState is undefined so it seems that appState is undefined not this.props itself. – Kamil Commented Jul 6, 2016 at 14:28
• @MarioAlexandroSantini Object { history: Object, location: Object, params: Object, route: Object, routeParams: Object, routes: Array[2], children: null, 2 more… } – pyprism Commented Jul 6, 2016 at 14:32
• @Kamil I just want to see if the poperty was direct in this.props or not. – Mario Santini Commented Jul 6, 2016 at 14:38
• 1 Here there is an example on how to do it. Please check and e back if you have troubles. – Mario Santini Commented Jul 6, 2016 at 14:42

1 Answer 1

change this

this.props.params.appState

to

this.props.route.appState

Params is dynamic segments of the URL, for props you need route