React-роутер с BrowserRouter / browserHistory не работает при обновлении

У меня есть следующий файл конфигурации webpack:

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

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
    entry: [
        APP_DIR + '/config/routes.jsx',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080'
    ],
  output: {
    publicPath: 'http://localhost:8080/src/client/public/'
  },
  module : {
    loaders : [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: APP_DIR,
        exclude: /node_modules/,
        query: {
            presets: ['es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: [ 'style', 'css', 'sass' ]
      }, 
      {
        test: /\.json$/, 
        loader: "json-loader"
     }
    ]
  }
};

module.exports = config;

все, что я пытаюсь сделать, это запустить мое приложение на локальном хосте, однако, когда я нажимаю: " http://localhost:8080/src/client/home" (в соответствии с моим маршрутом route.jsx и после запуска webpack-dev-server)

import React from 'react';

import { Route, Router, browserHistory } from 'react-router';
import ReactDOM from 'react-dom';

import Wrapper       from './../components/wrapper.jsx';
import Home          from './../components/home.jsx';
import Projects      from './../components/projects.jsx';
import SingleProject from './../components/projectContent/singleProject.jsx';
import About         from './../components/aboutUs.jsx'

ReactDOM.render((
    <Router history={browserHistory} >
        <Route path="/" component={Wrapper} >
            <Route path="home" component={Home} />
            <Route path="projects" component={Projects} />
            <Route path="projects/:id" component={SingleProject} />
            <Route path="about" component={About} />
        </Route>
    </Router>
), document.getElementById('app'));

я получил

Msgstr "Невозможно получить /src/client/home".

Источник

2 ответа

Решение

Первое, что вы упомянули в своих маршрутах как домашний компонент, чтобы иметь путь /home, Так что вам нужно посетить http://localhost:8080/home, Также, если вы попытаетесь получить доступ к этому URL напрямую, он выдаст вам эту ошибку, так как вы используете browserHistory, Если вы хотите, вы можете использовать hashHistory или же HashRouter в реакции-маршрутизатор v4, в этом случае вам нужно будет посетить http://localhost:8080/#/home, Если вы хотите продолжить использовать browserHistory или же BrowserRouter как в реакции-роутере v4, то вам нужно будет добавить historyApiFallback: true в вашем веб-пакете

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

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
    entry: [
        APP_DIR + '/config/routes.jsx',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080'
    ],
  output: {
    publicPath: 'http://localhost:8080/src/client/public/'
  },
  devServer: {
    historyApiFallback: true
  },
  module : {
    loaders : [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: APP_DIR,
        exclude: /node_modules/,
        query: {
            presets: ['es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: [ 'style', 'css', 'sass' ]
      }, 
      {
        test: /\.json$/, 
        loader: "json-loader"
     }
    ]
  }
};

module.exports = config;
Источник

Вы должны добавить это в настройках вашего веб-пакета:

devServer: {
  historyApiFallback: true,
},

И запустите свой сервер так:

webpack-dev-server --config webpack.config.js

Потому что вы хотите, чтобы React-Route обрабатывал маршрут вместо вашего сервера. Таким образом, независимо от того, что URL-адрес, он должен идти в index.html.

Источник
Другие вопросы по тегам