React Router не отображает компонент с <Link to = "/" />

У меня есть довольно простой пример, и я уверен, что что-то делаю не так, но я не могу заставить пользователя вернуться на мою домашнюю страницу. Когда я обновляю страницу на /, он будет нормально отображать домашнюю страницу (которая является PostCollection), но моя ссылка, которая перемещается обратно к / из других компонентов, не работает. Он просто обновляет URL-адрес в строке URL-адресов, но не загружает другой компонент.

Пример кода, усеченный для краткости:

const App:React.SFC = () => {
    return (
        <Provider store = {store}>
            <Router basename = {ROUTE_ROOT}>
                <>
                    <Header/>
                    <MainContainer>
                        <Switch>
                            <Route path='/' exact component = {PostCollection}/>
                            <Route path='/page/:page' exact component = {PostCollection}/>
                            <Route path='/:year/:month/:day/:post' exact component = {Post}/>
                        </Switch>
                    </MainContainer>
                    <Footer/>
                </>
            </Router>
        </Provider>
    );
};

export default App;

Затем в моем компоненте заголовка, как показано в моем основном приложении:

const Header:React.SFC = () => {
    return (
        <header className = "flex">
            <Link to='/'>
                Go Home
            </Link>
        </header>
    );
};

export default memo( Header );

Простой здесь только обновляет URL-адрес моего корня, но не выполняет повторную визуализацию с моим компонентом PostCollection. Кто-нибудь может увидеть, что я делаю не так?

Обычно это происходит, когда вы используете другие компоненты более высокого порядка вместе с React Router. Так ли это?

Colin Ricardo 10.11.2018 20:12

У меня есть поставщик redux, обернутый вокруг него, но это все. Может ли это вызывать проблемы?

jas7457 10.11.2018 20:27

Да, попробуйте изменить порядок упаковки, это может исправить.

Colin Ricardo 10.11.2018 20:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
75
0

Другие вопросы по теме