Страница не обновляется в ответ

Question

Я создал простое приложение, в котором я настраиваю логин и выход.Я замечаю, что когда я this.props.history.push("/"); изменяет URL, но не меняет содержимое страницы, как у меня в NavBar кнопки входа и выхода, но это остается тем же.

Вот код, откуда яперетаскивая страницу на дом, это функция выхода из системы.

import React from 'react';
import { Redirect } from 'react-router-dom'

const Logout = () => {
  localStorage.removeItem('jwt');
  return <Redirect to='/' />
}

export default Logout;

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

import React from 'react';
import Container from '@material-ui/core/Container';

const Home = () => {
  return (
    <Container fixed>
      <h1>Home page</h1>
    </Container>

      );
  }

export default Home;

Есть ли что-то еще, что я должен сделать, чтобы обновить контент.У меня ничего нет на моей домашней странице.

Answer 1

Просто нажать новый путь к объекту местоположения не изменит текущую страницу. Предполагая, что ваши маршруты правильно настроены внутри компонента Router, вы можете теперь обернуть дочерние элементы компонентом withRouter и вставить новый путь к уже отображенному URL.

const MyRouter = () =>(
    <BrowserRouter>
        <Route path='/item' component={Item} />
    </BrowserRouter>
)

const Item = withRouter(({ history }) =>{
    return(
         <div onClick={() => history.push('/anotherpath')}>I'm item </div>
    )
})