import ScheduleCreate from './components/schedule/create'
<Route path='schedule/create' component={requireAuth(ScheduleCreate)} />
import React from 'react'
export default class ScheduleCreate extends React.Component {
render() {
return(
<div class="container">
<h1>Create</h1>
</div>
)
}
}
And when i put the link /schedule/create or making refresh its get empty page with error on bundle files
do you know how to do nested route router ?
My routes are
<Route path='/' component={Layout}>
<IndexRoute component={Login} />
<Route path='dashboard' component={requireAuth(Dashboard)} />
<Route path='schedule' component={requireAuth(Schedule)} />
<Route path='schedule/create' component={requireAuth(ScheduleCreate)} />
<Route path="*" component={NotFound} />
</Route>
i have already tried
<Route path='schedule' component={requireAuth(Customer)} />
<Route path='/create' component={requireAuth(ScheduleCreate)} />
</Route>
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} routes={routes} />
</Provider>,
document.getElementById('app')
);
Thanks in advance Carlos Vieira
Why i'm getting a blank page when i refresh schedule/create ?
99% sure your issue is that your <script> tag has a relative link. Make it absolute.
<!-- do this -->
<script src="/static/bundle.js"></script>
<!-- not -->
<script src="static/bundle.js"></script>
<!-- or -->
<script src="./static/bundle.js"></script>
I believe you are right but
I'm using web pack
were can i change that
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
//var debug = process.env.NODE_ENV !== 'production';
module.exports = {
context: __dirname + '/app',
//devtool: debug ? 'inline-sourcemap' : null,
entry: {
app: './src/app'
},
// debug: false,
output: {
path: './public/static',
filename: '[name].bundle.[hash].js'
},
module: {
loaders: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_module/,
query: {
presets: ['es2015', 'react', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}
},
{
test: /\.(scss|sass|css)$/,
loader: ExtractTextPlugin.extract('css?sourceMap!sass?sourceMap')
},
{
test: /\.(woff|woff2|eot|ttf|svg|otf)$/,
exclude: /node_module/,
loader: 'url-loader?limit=100000'
},/*
{
test: /\.(jpe?g|png|gif|svg)$/i,
exclude: /node_module/,
loaders: [
'file?hash=sha512&digest=hex&name=images/[name].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}*/
/*{
test: /\.scss$/,
loaders: ["style", "css?modules&importLoaders=2", "sass", "bulma"]
}*/
]
},
plugins: [
/*new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: false,
sourcemap: false
}),
*/
new HtmlWebpackPlugin(
{
title: 'Vikings Porto FrontEnd',
template: __dirname + '/app/src/public/pages/base.html',
chunks: ['app']
}
),/*
new HtmlWebpackPlugin(
{
filename: 'about.html',
template: __dirname + '/app/templates/base.html',
chunks: ['about']
}
),*/
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
/* new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: true
}
}),*/
new ExtractTextPlugin('[name].bundle.[hash].css')
],
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true,
headers: { "Access-Control-Allow-Origin": "*" }
}
};
i already fixed it
many thanks you were pretty syre
Most helpful comment
99% sure your issue is that your
<script>tag has a relative link. Make it absolute.