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

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

0 голосов
/ 13 ноября 2018

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

У меня есть приложение React + TypeScript, в котором для реакции между страницами используется response-router-dom 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. Что-то о favicon, это может быть проблемой? Местоположение совершенно неверно 

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>

1 Ответ

0 голосов
/ 13 ноября 2018

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

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

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

...