Задать вопрос
@brainexplosion
react

Почему не работает routing?

Не работает Route. Пишет: "Cannot GET /login". использую react+webpack. Подскажите причину, пожалуйста. Вот часть кода(где, на мой взгляд, может быть причина ошибки): 

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Signup from "./Signup"
import Login from "./Login"
import SecretComponent from './SecretComponent';

class App extends Component {

    render() {
        return (
            <Router>
                <div>
                    <Route exact path="/" component={Signup} />
                    <Route path="/login" component={Login} />
                    <Route path="/secretpage" component={SecretComponent} />
                </div>
            </Router>
        );
    }
}

export default App;


{
  "name": "react_webpack_starter",
  "version": "1.0.0",
  "description": "Boilerplate for React apps",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "Brad Traversy",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.3.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.56",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.1.0",
    "style-loader": "^0.20.3",
    "webpack": "^4.4.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}
  • Вопрос задан
  • 4178 просмотров
1 комментарий
Подписаться 3 Простой 1 комментарий
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Проблема в том, что вы используете и изменяете чужое решение не разобравшись толком, а как оно вообще работает. Как следствие, причину ищите не там. У вас сервер, webpack dev server в вашем случае, обрабатывает только '/'.
Добавьте следующие строки в конфиг:
module.exports = {
  /* ... */
  output: {
     /* ... */
    publicPath: '/'
  },
   /* ... */
  devServer: {
    historyApiFallback: true,
  },
};

Вместо добавления блока devServer можно изменить скрипт start в package.json:
"start": "webpack-dev-server --mode development --open --hot --history-api-fallback",

Документация.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
React Native разработчик
Petsee
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Дизайн личного кабинета (клиентская часть)
23 апр. 2024, в 22:37
500 руб./в час
Ещё заказы