React + TypeScript с проблемой развертывания маршрутизатора на страницах Github

Local работает нормально, но при запуске "npm run deploy" веб-сайт возвращает 404.

У меня есть приложение React + TypeScript, которое использует BrowserRouter с реактивным маршрутизатором для навигации между страницами.

Мне известно о проблеме на страницах github с реактивным маршрутизатором, поэтому я попытался добавить basename = {process.env.PUBLIC_URL}, изменить его на HashRouter и многое другое. Я занимаюсь этой проблемой 7 часов подряд ... и, похоже, нет ресурсов по этой конкретной проблеме для Typescript.

Может кто-нибудь мне помочь!

index.tsx

ReactDOM.render(
  <AppRouter />,
  document.getElementById('root') as HTMLElement
);

Router.tsx

export const AppRouter: React.StatelessComponent<{}> = () => {

return (

    <BrowserRouter basename={process.env.PUBLIC_URL}>
        <div>
            <NavBar />
            <Switch>
                <Route exact={true} path='/' component={App} />
                <Route exact={true} path='/' component={Notes} />
                <Route exact={true} path='/About' component={About} />
            </Switch>  
        </div>
    </BrowserRouter>
);

Также пробовал Router.tsx

export const AppRouter: React.StatelessComponent<{}> = () => {

return (

    <HashRouter>
        <div>
            <NavBar />
            <Switch>
                <Route exact={true} path='/' component={App} />
                <Route exact={true} path='/' component={Notes} />
                <Route exact={true} path='/About' component={About} />
            </Switch>  
        </div>
    </HashRouter>
);

NavBar.tsx

export const NavBar: React.StatelessComponent<{}> = () => {

return (
    <div id='nav-bar'>
        <AppBar position='static' color='default'>
            <Toolbar>
                <span id='navbar-title'>
                    <Typography variant='title' color='default'>
                        Keep
                    </Typography>
                </span>
                <Link to="/">
                    <Button size="large" color="primary" variant="text">Notes</Button>
                </Link>
                <Link to="/About">
                    <Button size="large" color="primary" variant="text">About</Button>
                </Link>
            </Toolbar>
        </AppBar>
    </div>
)

Спасибо за чтение.

РЕДАКТИРОВАТЬ ниже - это точный ответ об ошибке от веб-консоли при ошибке 404. Что-то о фавиконе, это может быть проблемой? Расположение совершенно неправильное

json469.github.io/:1 Refused to load the image 'https://json469.github.io/favicon.ico' because it violates the following Content Security Policy directive: "img-src data:".

Я также пробовал отладку, распечатав process.env.PUBLIC_URL, однако он вернул пустую строку ...

EDIT2 ниже - это изменение, внесенное в Router.tsx, которое устранило проблему.

    <HashRouter>
        <div>
            <NavBar />
                <main>
                    <Switch>
                        <Route exact={true} path='/' component={App} />
                        <Route exact={true} path='/' component={Notes} />
                        <Route exact={true} path='/About' component={About} />
                    </Switch>
                </main>
        </div>
    </HashRouter>

reactjs typescript javascript react-router github-pages
person Jesse    schedule 13.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вряд ли это связано с TypeScript или даже с React Router. Если вы получили 404, это связано с тем, что ваш сервер должен перенаправить пользователя в ваше приложение React, если они посещают маршрут, который сервер не знает, и ваше приложение может затем сделать вид, что выполняет фактическую маршрутизацию.

Однако похоже, что GitHub Pages не поддерживает это. Таким образом, вы не можете использовать «правильные» URL-адреса, такие как username.github.io/page/some-route. Как вы упомянули, обходным путем является использование Hash Router, но это означает, что URL-адреса будут выглядеть как username.github.io/page#/some-route.

Таким образом, ваша проблема, вероятно, в том, что вы пробуете первый путь, а не второй. Чтобы решить эту проблему, вы можете попробовать такой маршрут или перейти на другой хост.

person Vincent    schedule 13.11.2018
comment
Спасибо за выявление проблемы! Я пробовал HashRoute, но мне все равно не повезло. Будет ли что-то еще, что мне нужно будет изменить из второго кода Router.tsx? Поскольку это был метод HashRoute, который я пробовал, но все равно получил 404 :( - person Jesse; 14.11.2018
comment
@Jesse Было бы полезно, если бы вы могли показать нам, какой маршрут вы пробовали, который дает вам 404. Если вы используете HashRouter, по крайней мере, вы должны оказаться на своей индексной странице, а не на странице GitHub 404. - person Vincent; 15.11.2018
comment
@ Джесси О, я только что видел твою правку. Если вы видите только 404 в своей консоли, это потому, что браузеры автоматически пытаются получить /favicon.ico, если он не определен, - не о чем беспокоиться. Если вы хотите узнать об этом больше, см. en.wikipedia.org/wiki/Favicon прямо сейчас что вы также разместили свое имя пользователя GitHub, однако я вижу, что ваше приложение также не находится на GitHub: github.com/json469/json469.github.io Не могли бы вы показать свой package.json и результат при запуске npm run deploy? - person Vincent; 15.11.2018
comment
Уточнение проблемы вне TS было для меня хорошим началом! Мне удалось начать все сначала и заставить его работать с HashRoute. Я считаю, что виноват я, когда я как-то неправильно вложил HashRoute? Я обновил изменение, которое заставило его работать. Спасибо за вашу помощь :) - person Jesse; 16.11.2018
comment
Приятно слышать, что вы ее решили - иногда мне просто нужно взглянуть на проблему под другим углом, я думаю :) - person Vincent; 16.11.2018