0

I'm struggling with what ought to be a simple thing using react-router (with redux-simple-router, fwiw).

I have some basic routes defined like so: 

<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's redner method has the facilities to deal with the mine parameter, and logic to handle presence (or lack) of the name prop (snipping pieces that aren't relevant). 

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...>

My problem is this: Client-side I can navigate quite well. Using the anchors or spans that call a routeActions.replace() or routeActions.push() then everything's fine. The problem is specifically when I'm in a "deep" path (i.e., one with a slash in it: /reports/fooReport versus /all) and I refresh the page, or if I try to navigate directly to it. Trying to load a /reports/foo page server-side gives me a SyntaxError: expected expression, got '<' error, as if it wasn't expecting the index.html that loads the webpack js. I can navigate to /mine just fine, which is kind of what isn't making sense.

What simple thing am I missing to get this working for both direct and indirect navigation? Thanks!

4

2 回答 2

0

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

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

于 2016-01-20T17:39:48.563 回答
0

您可以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>
于 2016-12-01T10:46:39.183 回答