Блог

Главная - Вопросы по программированию - Объединение маршрутов хэширования и не хэширования в react не работает

Объединение маршрутов хэширования и не хэширования в react не работает

#reactjs #react-router-dom

Вопрос:

У меня есть следующее:

 export default function App() {
    return (
        <div>
            <BrowserRouter>
                <Switch>
                    <Route exact path="/">
                        <HashRouter>
                            <Switch>
                                <Route exact path="/" component={ServiceHomepage}/>
                                <Rout path="/foo" component={FooPage}/>
                            </Switch>
                        </HashRouter>
                    </Route>
                    <Route exact path="/token_exchange" component={TokenExchange}/>
                </Switch>
            </BrowserRouter>
        </div>
    );
}

И я ожидал бы, что, если я нажму / , я получу домашнюю страницу, если я нажму /#/foo , я получу страницу, но по некоторым причинам /token_exchange , похоже, не работает. Что я делаю не так?

Это ошибка, которую я получаю:

Cannot GET /token_exchange

Комментарии:

1. «/foo» — это не то же самое, что «/#foo», первое-это, в то FooPage время как второе было бы ссылкой на ServiceHomepage . Проверьте ссылку react-router-hash . Если вы хотите нажать на тег привязки на странице foo, ссылка будет выглядеть как «/foo#foo».

2. Приносим извинения, пропустил /

3. Не включайте «/#» в свои ссылки в приложении. Если вы хотите перейти по ссылке FooPage , путь будет «/foo». Кроме того, почему вы смешиваете и визуализируете более 1 маршрутизатора?

4. проблема, с которой я сталкиваюсь, — это конечная точка token_exchange, эта конечная точка, похоже, недоступна @DrewReese

5. Это должно сработать, я не понимаю, почему бы и нет, кроме того, что, возможно, путь не совсем "/token_exchange" правильный . Во всяком случае, маршрут «/foo» должен быть недоступен, так exact path="/" как отображение на маршруте исключает его совпадение.

Ответ №1:

Оказывается, мне нужно было добавить historyApiFallback: true в свой конфигурационный файл webpack.

Метки: