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!

Take a look at your dev tools network panel. Which request is it erring on? My guess is that you are serving the index.html from unmatched pages, and that index.html has a script tag with a relative url to the bundle generated by webpack. What does your index.html look like? — ibash, Jan 20 '16 at 14:59
Well, looking at some debug logs does shed some light on it: App:Server /report/SomeReport +0ms App:Server /report/report-server-react.js +0ms So I fixed a relative path in index.html, which got THAT error to go away, but by redux state doesn't seem to propagate to the deep page now... — snowell, Jan 20 '16 at 15:01
Are you using the browser history api? https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md#browserhistory — ibash, Jan 20 '16 at 16:42

score 0 · Accepted Answer · answered Jan 20 '16 at 17:39

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.

score 0 · Answer 2 · answered Dec 01 '16 at 10:46

You can do deep routing in react-router like this:

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

react-router / redux-simple router loading deep routes

2 Answers2