我正在学习使用 Redux、React 和 React Router。 我遇到过这样的问题:
当我使用 Link 从“/”重定向到“/details/{id}”等 URL 时,我发现调用了错误的操作创建者。来自“/”组件的操作创建者被称为“/details/{id}”中组件的操作创建者。
但是如果我刷新页面,一切都会好起来的。调用正确的操作。
带有链接的路由:<Link to={
/details/${this.props.movie.id} }>
其他错误:如果我从此页面按“返回”返回到“/”,我会收到错误消息,提示我的 props 数据未定义。 例如,props 为空,并且 http-request 的操作创建者不会从 componentDidMount() 调用(?)。
但是如果我再次刷新页面,一切都会恢复正常。
路由出了什么问题?还是还原?
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);
“详细信息/{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))
});
};
}
reducer :
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
});
我很乐意接受所有建议。谢谢。
最佳答案
React 路由器首先匹配关闭 URL,我认为问题在于组件的顺序。 我建议你像这样订购它们,它应该得到解决:
const Routes = () => {
return <div>
<Route path="/details/:id" component={MovieDetailsContainer} />
<Route exact path="/" component={Main} />
</div>;
}
React Router 还有一个用于在 URL 之间切换的组件,如果您的 URL 不明确,您可以利用该组件:
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
...
<Switch>
<Route path="/about" component={About} />
<Route path="/company" component={Company} />
<Route path="/:user" component={User} />
</Switch>
PS:抱歉,如果这不是您正在寻找的答案,我只是想发表评论而不是发布此答案,我只是还没有直接发表评论的声誉:|
关于javascript - React Router 的 Props 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51243629/