my goal define nested url so: /dashboard/modules/12242433
i using example model code: react router examples: dynamic-segments
here render method defines 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 able go /dashboard, try go /dashboard/modules or /dashboard/modules/123232, error message doesn't seem helpful:
bundle.js:2 uncaught syntaxerror: unexpected token <
here components, understanding should work long rendered comps children.
dashboard
import react 'react' export default react.createclass({ render() { return ( <div> <p> hello, dashboard! </p> { this.props.children } </div> ) } }) modules
import react 'react' export default react.createclass({ render() { return ( <div> <p> hello, modules! </p> { this.props.children } </div> ) } }) module
import react 'react' export default react.createclass({ render() { return ( <div> <p> hello, single module! </p> </div> ) } }) update
it turns out code correct(ish) more confused. navigation work long arrive url via click:
<navlink to="/dashboard/modules/somemodname">view mod</navlink>
i have been testing putting /dashboard/modules/somemodname in url, , break.
is there way can have url work both ways?
i have found second bug , think related..
when click link takes me /dashboard/modules loads correctly, when hit refresh, gives me original error.
what core piece of react router have overlooked?
second update when pull code down locally example able reintroduce bug (the page breaks upon refresh when in detail view). refresh not break when clone whole repo , run is. effects 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'] } ] } };
i posted a question similar issue before. later fix issue webpack setup adding publicpath output.
so have this:
const config = { ... output: { path: path.join(__dirname, 'public'), publicpath: '/', // try set publicpath correctly filename: 'bundle.js' }, ... }; if using express server, make sure capture request. this:
app.get('/*', (req, res) => { res.sendfile('index.html', { root: public_dir }); }); 