react-router / redux-simple router loading deep routes

Question

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!

Answer 1

Well, I eventually figured it out, and it had very little to do with what I had been thinking. Turns out my getScheduledReports() method was going off of the assumption that the redux state would be populated, and when navigating to reports/whatever it wasn't right away.

Adding a null/undefined check for the state object from the redux store and returning null when it wasn't present fixed it for me. Once the store populated and the reports were available, my component saw it and refreshed.