Как сделать страницу NoMatch на React-Router v4?

Question

[jspie]

Здравствуйте, не могу понять как можно исправить такую ситуацию... При использовании HashRouter. Страницу NotFound загружает, но стоит изменить на BrowserRouter, как на любой непонятный url пишет: cannot get / ..
App.jsx

import { 
    BrowserRouter as Router,
    Route,
    Switch,
    HashRouter
} from 'react-router-dom'

import Main from '../layouts/main/index'
import NotFound from '../layouts/404/index'

export default class App extends Component {
    render(){
        return<Router>
                <Switch>
                    <Route exact path="/" component = { Main }/>
                    <Route component = { NotFound }/>
                </Switch>
            </Router>
    }
}

Использую express и webpack. в Express не прописал ни одного запроса, мне кажется дело в express. Как можно это решить?

Comments

[kulaeff]

А в экспрессе роуты какие-нить прописаны?

[jspie]

kulaeff, нет

[kulaeff]

jspie, а вьюха откуда берется? В общем вам надо сделать так, чтобы по любому роуту в экспрессе отдавалась вьюха, в которой рендерится реакт-приложуха. Вроде бы это делалось так app.use('*', ...).

[jspie]

kulaeff, Т.е. мне надо делать SSR приложение?

[kulaeff]

jspie, нет, не обязательно. Вы понимаете чем отличается HashRouter от BrowserRouter?

[jspie]

kulaeff, на BrowserRouter используют динамические запросы на сервер, ну а Hash когда статический веб сайт.

[kulaeff]

в общем, не важно. Когда вы переходите в своем реакт-приложении по ссылке, то браузер никакой запрос на сервер не отправляет, поскольку все страницы находятся на стороне клиента. Однако, есть одно но: что будет, если нажать в браузере F5? В таком случае браузер обратится к серверу, чтобы получить HTML-страницу, в которой уже на стороне клиенте будет рендерится реакт-приложение. К примеру, находимся мы по урлу /news, нажали на ссылку, перешли на урл /news/1. Теперь, если нажать F5, браузер отправит на сервер запрос типа GET /news/1, но поскольку у вас в экспрессе нет такого роута, то и возвращается 404 ошибка.

[jspie]

kulaeff, Я понял. Надо отправлять отдельную view? На клиенте как я понял это не будет работать...

[kulaeff]

jspie, не отдельную, а ту же самую, единственную вьюху, которая отдается, когда вы загружаете свое приложение в браузере.

[jspie]

kulaeff, Ах блин, если его отправлять, то уже реакт не генерит

Answer 1

[Хазрат Гаджикеримов]

Добавить path='*' к роуту not found