React Router: Defining nested params, seems correct, but given useless error message

Question

My goal is to define a nested url like so: /dashboard/modules/12242433

I was using this example to model my code: React Router Examples: dynamic-segments

Here is my render method that defines my routes

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="dashboard" component={Dashboard}> 
        <Route path="modules" component={Modules}> 
          <Route path=":module_id" component={Module} /> 
        </Route>
      </Route>
    </Route>
  </Router>
), document.getElementById('app'));

I am able to go to /dashboard, but as soon as I try to go to /dashboard/modules or /dashboard/modules/123232, I get an error message which doesn't seem to be very helpful:

bundle.js:2 Uncaught SyntaxError: Unexpected token <

Here are my components, my understanding was that this should work as long as I rendered the comps children.

Dashboard

import React from 'react'

export default React.createClass({
  render() {
    return (
      <div>
        <p> Hello, Dashboard! </p>
        { this.props.children }
      </div>
      )
  }
})

Modules

import React from 'react'

export default React.createClass({
  render() {
    return (
      <div>
        <p> Hello, Modules! </p>
        { this.props.children }
      </div>

      )
  }
})

Module

import React from 'react'

export default React.createClass({
  render() {
    return (
      <div>
        <p> Hello, Single Module! </p>
      </div>
      )
  }
})

Update

It turns out my code was correct(ish) but now I am even more confused. This navigation does work as long as you arrive to a URL via a click:

<NavLink to="/dashboard/modules/SomeModName">View Mod</NavLink>

I have been testing it simply by putting /dashboard/modules/SomeModName in the URL, and this is what would always break.

Is there a way you can have this URL work both ways?

I have found a second bug and I think they are related..

When I click the link which takes me to /dashboard/modules it loads correctly, however when I hit refresh, it gives me the original error.

What core piece of React Router have I overlooked?

Second Update When I pull this code down locally from the example I am able to reintroduce the bug (the page breaks upon refresh when in detail view). The refresh however does not break when you clone the whole repo and run it as is. What is it that effects this behavior?

React Router Master-Detail Example

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-hot-middleware/client',
    './client/index'
  ],
  output: {
    path: path.join(__dirname, 'static'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.join(__dirname, 'client'),
        query: {
          plugins: ['transform-runtime'],
          presets: ['es2015', 'stage-0', 'react', 'react-hmre']
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }
    ]
  }
};

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

I posted a question with similar issue before. I later fix the issue with webpack setup by adding publicPath to the output.

so you have something like this:

const config = {
  ...
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: '/',      // try to set up your publicPath correctly
    filename: 'bundle.js'
  },
  ...
};

if you are using an express server, make sure you capture all the request. Something like this:

app.get('/*', (req, res) => {
  res.sendFile('index.html', { root: PUBLIC_DIR });
});

edited May 23 '17 at 12:00

Community

1
1

answered Jun 07 '16 at 01:35

xiaofan2406

3,250
5
26
34

I already have my public path configured like so: output: { path: path.join(__dirname, 'static'), filename: 'bundle.js', publicPath: '/static/' }, and I have this in my server.js, everything else seems to work nicely: app.get('*', function (req, res) { res.sendFile(path.join(__dirname, 'public', 'index.html')) }); – fresh5447 Jun 07 '16 at 03:15
do you have ```static``` inside ```static```? the ```publicPath``` should be relative path to ```path```. – xiaofan2406 Jun 07 '16 at 03:42
I have a `public` folder which houses my index.html and images etc. My `static` folder is generated by my build and holds my `bundle.js` – fresh5447 Jun 07 '16 at 16:06
my advice: play around with your webpack setup. start with a simpler folder structure. and make sure index.html is correctly linked with bundle.js. If ```Link``` component works means your router setup is correct. If you refresh and it fails, means ```index.html``` or ```bundle.js``` is not served correctly. – xiaofan2406 Jun 07 '16 at 23:35
Sounds good I think you may be right. I haven't really heard of anyone else running into this issue. – fresh5447 Jun 07 '16 at 23:36
For those who care I found the solution. In my index.html I had a relative path to my bundle.js (ie ``). This was breaking everything. So I made the path absolute so it could always find the bundle. – fresh5447 Jun 08 '16 at 18:27

React Router: Defining nested params, seems correct, but given useless error message

1 Answers1