0

Сделал тест роута на реакте:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

ReactDOM.render(
    <Router>
        <Switch>
            <Route exact path="/" render={()=>{
                return (
                    <div>
                        <h1>Home page</h1>
                        <Link to="/login">Go to Login</Link>
                    </div>
                );
            }}/>
            <Route path="/login" render={()=>{
                return (
                    <div>
                        <h1>Login page</h1>
                        <Link to="/">Go to Home</Link>
                    </div>
                );
            }}/>
        </Switch>
    </Router>,
    document.getElementById("index")
);

Все красиво работает если просто запустить. Но получаю сообщение "Cannot GET /login" вместо просмотра страницы Login, если перейти на страницу "/login" просто по адресу (или обновить страницу, находясь на этой странице) после перехода на эту страницу с "Home page".

Нашел пример работы "BrowserReact", открывал отдельно решение, и там все нормально работает.

На более старой версии реакта и роутера решал вопрос расположением компиленных js по нужным адресам.

Это нормальное поведение BrowserRouter? Или я что-то недопонимаю, ведь найденный мной пример работает корректно?

4
  • Попробуйте убрать exact с login
    – Puvvl
    24 мая 2018 в 9:28
  • @Puvvl , да я там тестил и с exact и без, разницы не было, все равно при обновлении страницы пишет не то, что ожидается :( вот главная без exact нормально не работает.
    – Stanislav
    24 мая 2018 в 10:04
  • а обернуть 2 Route в <div></div> после <Switch>
    – Puvvl
    24 мая 2018 в 10:17
  • @Puvvl , а смысл?
    – Stanislav
    25 мая 2018 в 3:34

6 ответов 6

2

Может, кому-то поможет: мне помогло добавление следющего кода в webpack.config.js

devServer: {
    historyApiFallback: true,
}
0

Проблема, вероятнее всего, в сервере webpack-dev-sever.

На удивление проблема решилась на другом сервере (от create-react-app react-scripts start). Но опять же, решение сработало только после того, как я полностью удалил node&npm, а так же установленные зависимости, и снова установил их. До полного удаления node&npm по какой-то причине этот сервер работать не хотел.

0

Оставлю как памятку себе. Та же проблема webpack4 Решилось добавлением строки publicPath: '/', в webpack.config.js


module.exports = {
  entry: path.join(paths.SRC, 'index.jsx'),
  output: {
    path: paths.DIST,
    publicPath: '/',
    filename: 'bundle.js'
  },

0

Если Вы работаете на своей сборке не забудьте в Webpack.config прописать:

devServer: {
    historyApiFallback: true,
}
0

Мне помогло заменить BrowserRouter на HashRouter

0

Я сделал сборку на Webpack и при попытке настроить роутинг (когда вводишь ссылку в адресной строке в ручную - выскакивала ошибка

devServer: { port: 8000, open: true, historyApiFallback: true, }

мне помог этот вариан. Спасибо парню который подсказыл выше в коментах

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.