react-router / redux-simple 路由器加载深度路由答案

【问题标题】：react-router / redux-simple router loading deep routesreact-router / redux-simple 路由器加载深度路由
【发布时间】：2016-01-20 14:03:52
【问题描述】：

我正在努力解决使用 react-router（使用 redux-simple-router，fwiw）应该是一件简单的事情。

我有一些这样定义的基本路线：

<Route path="/" component={AppRoot}>
        <Route path="all" component={ScheduledReportList} mine={false}/>
        <Route path="mine" component={ScheduledReportList} mine={true}/>
        <Route path="report/:name" component={ScheduledReportList} mine={false}/>
</Route>

ScheduledReportList 的 redner 方法具有处理 mine 参数的功能，以及处理 name 属性存在（或缺失）的逻辑（剪断不相关的部分）。

render() {
        const { name } = this.props.params;
        if (name != undefined && name != null) {
            // we are displaying details for a single report only
            let values = getScheduledReports();
            let currentReport = _.find(values, (report) => {
                return report.name == name;
            });
            if (this.props.route.mine) {
                return (
                    <MyReportDetails... />
                );
            } else {
                return (
                    <ReportDetails... />
                );
            }
        } else {
            // we are displaying all reports
            <snip...>
                values.map((report, i) => {
                    let anchor = undefined;
                    if (this.props.route.mine) {
                        anchor = <a onClick={() => {this.props.routeActions.replace('/myreport/' + report.name)}}>{report.name}</a>
                    } else {
                        anchor = <a onClick={() => {this.props.routeActions.replace('/report/' + report.name)}}>{report.name}</a>
                    }
                    <snip...>

我的问题是：客户端我可以很好地导航。使用调用routeActions.replace() 或routeActions.push() 的锚点或跨度，那么一切都很好。问题特别是当我处于“深”路径（即，其中有一个斜线：/reports/fooReport 与 /all）并且我刷新页面时，或者我尝试直接导航到它时。尝试加载/reports/foo 页面服务器端给我一个SyntaxError: expected expression, got '<' 错误，好像它不期望加载webpack js 的index.html。我可以很好地导航到 /mine，这有点没有意义。

我缺少什么简单的东西才能让它同时适用于直接和间接导航？谢谢！

【问题讨论】：

看看你的开发工具网络面板。哪个请求出错了？我的猜测是您正在从不匹配的页面提供 index.html，并且 index.html 有一个 script 标签，其中包含 webpack 生成的包的相对 url。你的 index.html 是什么样的？
好吧，查看一些调试日志确实对它有所了解： App:Server /report/SomeReport +0ms App:Server /report/report-server-react.js +0ms 所以我修复了一个index.html 中的相对路径，它让那个错误消失了，但是通过 redux 状态现在似乎没有传播到深层页面......
你在使用浏览器历史API吗？ github.com/rackt/react-router/blob/master/docs/guides/basics/…

标签： javascript react-router react-router-redux

【解决方案1】：

嗯，我最终想通了，这与我一直在想的没什么关系。结果我的 getScheduledReports() 方法偏离了 redux 状态将被填充的假设，并且在导航到报告时/无论它不是马上。

为来自 redux 存储的 state 对象添加一个 null/undefined 检查，并在它不存在时返回 null 为我修复了它。一旦商店填充并且报告可用，我的组件就会看到它并刷新。

【讨论】：

【解决方案2】：

您可以像这样在react-router 中进行深度路由：

<Route path="/" component={Layout} >
    <IndexRoute component={Homepage} />
    <Route path="home" component={Homepage} />
    <Route path="bayaans" component={Bayaans} />
    <Route path="read-quran" component={Readquran} />
    <Route path="duas" component={Duas} />
    <Route path="events" component={Events} />
    <Route path="contact" component={Contactpage} />
</Route>

<Route path="/admin" component={AdminLayout} >
    <IndexRoute component={LoginPg} />
    <Route path="dashboard" component={Dashboard} />
    <Route path="list-bayaans" component={AdminBayaansPg} />
    <Route path="list-duas" component={AdminDuasPg} />
    <Route path="list-events" component={AdminEventsPg} />
</Route>

【讨论】：