Question

我有几个组件显示反应路由器，它们具有动态网址路径。我有一个示例路径

<Route path="/newproject/:id" onEnter={checkSesh} component= {ProjectDetails} />

输入此组件时，我有一个componentWillMount函数，可以提取网址的id部分，以便我可以获取正确项目的信息并在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。当我刷新此页面时，我收到了该错误。出于某种原因，该错误在我的index.html顶部抱怨我的<!DOCTYPE html>标记。这个index.html是渲染所有React的地方。

Answer 1

刷新页面时不保留存储状态。确保状态对于加载页面并不重要，或者至少每次都正确初始化。

例如登录信息如果保存在商店中，而不是在带有localStorage或cookies等的浏览器上。然后在刷新时，错误将在尝试访问/ getteaminfo / route axios时出现。响应将出现错误html，并且js无法对其进行解析。

请查看您的网络控制台以获取更多信息。您可以使用https://github.com/zalmoxisus/redux-devtools-extension之类的Chrome扩展程序来展示您的商店等。

确保检查带有id的/ getteaminfo / give未通过。

另外，请确保在服务器端，是否通过类似的方式将请求路由到react-router路径？

e.g。表达js，

app.get('*', function response(req, res) {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

请务必使用index.html的真实位置sendFile

Answer 2

我在这里找到了答案：react-router dynamic segments crash when accessed我将def SendMail(sujet, message,*dest): toaddrs = list(dest) values = [i for i in toaddrs[0]] server = smtplib.SMTP() server.connect(SMTP) server.helo() msg = MIMEMultipart('alternative') msg['Subject'] = sujet msg['From'] = fromaddr msg['To'] = ','.join(toaddrs) msg['Cc'] = ','.join(ccaddrs) part = MIMEText(message, 'html') msg.attach(part) server.sendmail(fromaddr, toaddrs, msg.as_string()) server.quit()添加到了index.html的<base href="/" />中。您还可以在此处阅读更多信息：Unexpected token < error in react router component

刷新具有动态URL / params

2 个答案: