hen*_*hen 6 reactjs react-router redux
我有几个使用 React Router 显示的组件，它们具有动态 url 路径。我的一个示例路径是
<Route path="/newproject/:id" onEnter={checkSesh} component= {ProjectDetails} />
输入此组件时，我有一个componentWillMount函数可以提取idurl 的一部分，以便我可以获得正确项目的信息并将其呈现在组件上ProjectDetails。
componentWillMount() {
var id = this.props.router.params.id
this.props.teamDetails(id);
}
this.props.teamDetails(id)这会调用一个 redux 操作创建者，该创建者将向一条快速路线发出 axios 请求，该路线将从数据库中获取项目信息。
export function teamDetails(id) {
return function(dispatch) {
axios.get('/getteaminfo/' + id)
.then(res => {
dispatch({ type: "SET_TEAM_DETAILS", payload: {
teamInfo: res.data.teamInfo,
admin: res.data.admin,
adminID: res.data.teamInfo.teamAdmin,
teamMembers: res.data.teamInfo.teamMembers
}
})
});
}
}
登录后访问页面时一切正常。但是当我刷新页面时/newproject/:id，出现错误Uncaught SyntaxError: Unexpected token <。我的浏览器中的示例网址如下所示http://localhost:3000/newproject/58df1ae6aabc4916206fdaae。当我刷新此页面时，我收到该错误。由于某种原因，错误是抱怨我的<!DOCTYPE html>index.html 最顶部的标签。这个index.html是所有React渲染的地方。
刷新页面时，不会保留存储状态。确保状态对于加载页面并不重要，或者至少每次都正确初始化。
例如，如果登录信息保存在商店中，而不是保存在具有 localStorage 或 cookie 等的浏览器上，则在刷新时，尝试通过 axios 访问 /getteaminfo/ 路由时会出现错误。响应会出现错误html，并且无法被js解析。
请检查您的网络控制台以获取更多信息。您可以使用 chrome 扩展，例如https://github.com/zalmoxisus/redux-devtools-extension，它将显示您的商店等。
确保检查 /getteaminfo/ 提供的 id 未通过。
另外，请确保在您的服务器端，您是否通过类似的方式将请求路由到react-router路径？
例如快递js，
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
请务必sendFile使用index.html的真实位置
| 归档时间： |
|
| 查看次数： |
4343 次 |
| 最近记录： |