我正在学习使用 Redux、React 和 React Router。 我遇到了这样的问题：

当我使用 Link 从“/”重定向到“/details/{id}”之类的 URL 时 - 我发现调用了错误的动作创建者。来自“/”组件的动作创建器被调用，而不是“/details/{id}”中组件的动作创建器。

但是如果我刷新页面，一切都会好起来。调用正确的操作。

带链接的路由： <Link to={ /details/${this.props.movi​​e.id> }>

其他错误： 如果我从此页面按“返回”返回“/”，我将收到错误，即我的 props 数据未定义。 例如，props 为空，并且未从 componentDidMount() 调用 http 请求的动作创建器（？）。

但是如果我再次刷新页面，一切都会好起来。

路由有什么问题？或者redux?

ReactDOM.render(
    <Provider store={store}>
      <BrowserRouter>
        <Routes />
      </BrowserRouter>
    </Provider>, 
    document.getElementById('root'));


const Routes = () => {
    return <div>
        <Route exact path="/" component={Main} />
        <Route path="/details/:id" component={MovieDetailsContainer} />
    </div>;
}

"/":

    class MoviesDiscover extends Component {
    componentDidMount() {
        this.props.dicoverMovies();
    }

    render() {
      ...
    }
}

const mapStateToProps = (state) => {
    return {
        items: state.movieItems,
        hasErrored: state.movieHasErrored,
        isLoading: state.movieIsLoading,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        dicoverMovies: (url) => dispatch(dicoverMovies(url))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(MoviesDiscover);

"details/{id}":

class MovieDetailsContainer extends Component {
    componentDidMount() {
        var id = this.props.match.params.id;
        this.props.getMovie(id); // called from MoviesDiscover instead of this, after routing
    }

    render() {
        var id = this.props.match.params.id;
        ...
    }
}

const mapStateToProps = (state) => {
    return {
        item: state.movieItems,
        hasErrored: state.movieHasErrored,
        isLoading: state.movieIsLoading,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        getMovie: (url) => dispatch(getMovieDetails(url))
    };
};


export default connect(mapStateToProps, mapDispatchToProps)(MovieDetailsContainer);

操作（两个请求相同 - 针对结果、错误和加载的操作）：

 ...
export function moviesDataSuccess(items) {
    return {
        type: MOVIES_RESULTS,
        isLoading: false,
        items: items
    };
}

       export function dicoverMovies() {
        return (dispatch) => {
            dispatch(moviesIsLoading(true));

            API.get(URL_MOVIE_DISCOVER)
              .then(response => {
                dispatch(moviesIsLoading(false));
                dispatch(moviesDataSuccess(response.data));
              })
              .catch(e => {
                console.log(e);
                dispatch(moviesHasErrored(true))
              });
        };
    }

    export function getMovieDetails(id) {
        return (dispatch) => {
            dispatch(moviesIsLoading(true));

            API.get(URL_MOVIE_DETAILS(id))
              .then(response => {
                dispatch(moviesIsLoading(false));
                dispatch(moviesDataSuccess(response.data));
              })
              .catch(e => {
                console.log(e);
                dispatch(moviesHasErrored(true))
              });
        };
    }

Reducers：

   export function movieHasErrored(state = false, action) {
    switch (action.type) {
        case MOVIES_ERROR:
            return action.hasErrored;
        default:
            return state;
    }
}

export function movieIsLoading(state = false, action) {
    switch (action.type) {
        case MOVIES_LOADING:
            return action.isLoading;
        default:
            return state;
    }
}

export function movieItems(state = {}, action) {
    switch (action.type) {
        case MOVIES_RESULTS:
            return action.items;
        default:
            return state;
    }
}

const rootReducer = combineReducers({
    movieHasErrored, 
    movieIsLoading, 
    movieItems
});

我很乐意接受所有建议。谢谢。