реагировать-маршрутизатор не работает в производство и развертывание


Мое приложение react прекрасно работает на localhost, но когда после того, как я развернул его в gh-pages или surge, он не дает мне перемещаться между страницами с помощью URL.

Пользователи могут перейти на страницу регистрации, нажав меню в правом верхнем углу. но если пользователь использует http://chat.susi.ai/signup / URL, он дает 404 страницы

Я попробовал несколько решений из интернета, но не сделал этого. работа.

Следующий вопрос: я создал страницу 404, чтобы она отображалась, когда пользователь пытается перейти на broken links.It отлично работает в localhost. но не в производстве. Я попробовал это решение, но ничего не изменилось.

Это часть моего индекса.JS файл
const App = () => (
    <Router history={hashHistory}>
        <MuiThemeProvider>
            <Switch>
                <Route exact path="/" component={ChatApp} />
                <Route exact path="/signup" component={SignUp} />
                <Route exact path="/logout" component={Logout} />
                <Route exact path="/forgotpwd" component={ForgotPassword} />
                <Route exact path="*" component={NotFound} />

            </Switch>
        </MuiThemeProvider>
    </Router>
);

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Если кто-то может предложить хорошее решение с образцом кода для моих проблем, это было бы действительно полезно для меня.

1 2

1 ответ:

Это происходит потому, что пользователи не получают index.html, который загружает ваше приложение, когда они посещают эти URL-адреса напрямую.

Для surge вы можете Добавить файл200.html , содержащий то же содержимое, что и развертываемый файл index.html (или просто переименовать его в 200.html) - он будет передаваться пользователям по любому URL-адресу, который они посещают и который не соответствует статическому файлу, что позволит вашему приложению начать работу.


Edit: похоже, вы используете create-react-app. Это работает, когда вы развиваетесь локально, потому что create-react-app'S react-scripts пакет обрабатывает, обслуживая ваш index.html в качестве запасного варианта для этих запросов.

react-scripts руководство пользователя содержит разделы о , Как справиться с этим при развертывании на страницах GitHub и surge.sh (Как и выше).