remix-run / react-router

Declarative routing for React
https://reactrouter.com
MIT License
53.08k stars 10.31k forks source link

Neste route router error - blank page #4893

Closed ShintaroNippon closed 7 years ago

ShintaroNippon commented 7 years ago
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 ?

pshrmn commented 7 years ago

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>
ShintaroNippon commented 7 years ago

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": "*" }
    }
};
ShintaroNippon commented 7 years ago

i already fixed it many thanks you were pretty syre