reactjs / react-router-redux

Ruthlessly simple bindings to keep react-router and redux in sync
https://www.npmjs.com/package/react-router-redux
MIT License
7.81k stars 644 forks source link

Where is `this.props.location` and `this.props.history` in react-router-redux? #631

Closed wzup closed 6 years ago

wzup commented 6 years ago

Using react-router-redux I don't have this.props.location or this.props.history.

Read react-router docs. All these props are stored and available in this.props.history:

react router history md at master reacttraining react router

But I have nothing of them with react-router-redux. The only prop I have is routing.locationBeforeTransitions. Where are all others?

This is my config, as your docs suggests. And I don't have the options with it:

import {routerReducer} from 'react-router-redux';
const rootReducer = combineReducers({
    routing: routerReducer,
});

import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
const store = configureStore();

const history = syncHistoryWithStore(browserHistory, store);

export default class Root extends Component {
    render() {
        return (
            <Provider store={store}>
                <Router history={history} routes={routes} />
            </Provider>
        );
    }
}

When I connect my component to a state (connect(mapStateToProps)(Component)), all I have in props is this. Where is everything else? How do I control and programatically change my app's location?

state: {
    routing: {
        locationBeforeTransitions: { ... }
    }
}

UPD:

I've figured out. Your plugin deletes react-router props if I provide my own props:


// This has router in `ownProps`
<Route path="foo" component={FooPage} />
render() {
    <div>Foo</div>
}
const mapStateToProps = (state, ownProps) => {
    return {
        ...state.clients
    };
}
ownProps === { history: {}, router: {}, ... } // I have them here all right

// BOOM! This dosen't have router. Plugin deletes them if I provide my own
render() {
    <FooPage foo="Foo" bar="Bar" />
}
ownProps === { foo: "Foo", bar: "Bar" } // Where is history, router, all the rest?? Don't exist!
wzup commented 6 years ago

Any comment why you closed issue? Except this one of course

This is possibly an issue with the history library, but is ultimately a usage question. For those, please use ...