Когда обновляю страница исчезает и дает 404?

Ниже простая React приложения, я сделал npm run build, страницы переключается по клику на ссылки <Link>, но когда обновляю браузер дает 404 ?

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

export default function BasicExample() {
    return (
        <Router>
            <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/dashboard">Dashboard</Link>
                    </li>
                </ul>

                <hr/>

                <Switch>
                    <Route exact path="/">
                        <Home/>
                    </Route>
                    <Route path="/about">
                        <About/>
                    </Route>
                    <Route path="/dashboard">
                        <Dashboard/>
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

function Home() {
    return (
        <div>
            <h2>Home</h2>
        </div>
    );
}

function About() {
    return (
        <div>
            <h2>About</h2>
        </div>
    );
}

function Dashboard() {
    return (
        <div>
            <h2>Dashboard</h2>
        </div>
    );
}


Ответы (1 шт):

Автор решения: Eugene X

Потому что твой сервер не знает что такой путь /about /dashboard должен ссылаться на index.html. По умолчанию / ссылается на index.html а другие пути нет. Тебе нужно в настройках сервера прописать пути и перевести их на index.html тогда всё будет хорошо. Либо использовать HashRouter https://v5.reactrouter.com/web/api/HashRouter тогда URL будут выглядеть как /index.html#/dashbard и всё будет ОК

→ Ссылка