Интерфейс рендеринга в React Router 4 - PullRequest
Новая
       23

Интерфейс рендеринга в React Router 4

0 голосов
/ 21 декабря 2018

Я все еще довольно новичок в ReactJS, особенно в части маршрутизации.У меня есть пара вопросов, которые я испробовал много решений, которые я нашел на stackoverflow, но, похоже, ничего не помогает мне:

  1. Когда я запускаю свой проект реагирования локально, я получаю localhost:3000.Что если я хочу, чтобы он отображался как localhost:3000/extension/?

  2. Когда я перемещаюсь по своему проекту, я могу отображать разные страницы.Однако, если я ввожу URL-адрес непосредственно в браузер, отображается пустая страница.Там нет ошибки.Я где-то читал, что мои компоненты не связаны с моими маршрутами.Я не уверен, что мне нужно сделать, чтобы исправить это.

  3. Как я могу убедиться, что история используется должным образом?

rout.js: 

const RouteList = () => (
<Switch>
  <Route path="/extension/" exact component={withRouter(HomePage)} />
  <Route path="/extension/something" exact component={withRouter(SomethingPage)} />
  <Route component={Error} />
</Switch>

);

App.js: 

class  App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render () {
    return (
      <Router history={browserHistory}>
        <div>
          <Header />
          <RouteList />
          <Footer />
        </div>
      </Router>
    );
  }
}

export default App;

- РЕДАКТИРОВАТЬ - Добавлен мой webpack.config.js 

const commonConfig = {

  resolve: {
    modules: [path.resolve('./src'), 'node_modules'],
    extensions: ['.js', '.csv', '.json', '.scss', '.css', '.html']
  },


  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: [{ loader: 'eslint-loader', options: { configFile: '.eslintrc' } }]
      },
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        use: [{ loader: 'htmlhint-loader', options: { configFile:     '.htmlhintrc' } }],
        exclude: /node_modules/,
        enforce: 'pre'
      },
      {
        test: /\.(png|jpg|jpeg|svg|gif|svg|woff|woff2|ttf|eot)(\?    v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader'
      },
      {
        use: [{
          loader: 'html-loader'
        }],
        test: /\.html$/
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv)
       }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        if (module.resource && (/^.*\. 
   (css|less|scss)$/).test(module.resource)) {
          return false;
        }
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    new CopyWebpackPlugin([{
      from: __dirname + '/src/images',
      to: ''
    }]),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      chunksSortMode: 'dependency'
    }),
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};


const devConfig = {
  entry: {
    main: ['whatwg-fetch', 'core-js/es6', 'react-hot-loader/patch', 'index.js',
      'webpack-hot-middleware/client?reload=true']
  },

  target: 'web',

  devtool: 'inline-source-map',

  output: {
    path: path.join(__dirname, '/dev_build'),
    filename: '[name].bundle.js',
    publicPath: '/'
  },

  module: {
    rules: [
      {
        test: /\.scss/,
        include: path.resolve(__dirname, 'src/styles'),
        use: ['style-loader', 'css-loader', {loader: 'sass-loader', options: 
{sourceMap: true}}]
      },
      {
        test: /\.css$/,
        exclude: [/node_modules/],
        use: ['style-loader', 'css-loader?modules']
      },
      {
        test: /\.css$/,
        include: [/node_modules/],
        use: ['style-loader', 'css-loader']
      }
    ]
  },

 devServer: {
    contentBase: 'src',
    compress: true,
    hot: true,
    port: 3000,
    host: '0.0.0.0',
    disableHostCheck: true,
    historyApiFallback: {
      disableDotRule: true,
      index: 'build/index.html'
    },
    stats: 'minimal',
    overlay: true,
    proxy: {
      '/api/**': {
        target: {
          port: 8080
        },
        secure: false
      },
      '/actuator/**': {
        target: {
          port: 8080
        },
        secure: false
      },
    }
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
};

Пожалуйста, помогите, потому что я не уверен, что я делаю неправильно, и я разбираюсь в этом.Спасибо.

1 Ответ

0 голосов
/ 21 декабря 2018

Вы можете добавить Redirect от / до /extension, если хотите, чтобы это была целевая страница. 

const RouteList = () => (
  <Switch>
    <Redirect from='/' to='/extension/'/>
    <Route path="/extension/" exact component={HomePage} />
    <Route path="/extension/something" exact component={SomethingPage} />
    <Route component={Error} />
  </Switch>
);

Ваше приложение в настоящее время работает только при посещении на /, потому что вашСервер будет обслуживать только index.html для индексного маршрута.Вы можете использовать historyApiFallback, если хотите, чтобы файл index.html обслуживался, вместо любых ответов 404.

webpack.config.js 

module.exports = {
  //...
  devServer: {
    historyApiFallback: true
  }
};
...