Есть ли способ принудительно обновить компоненты, изменив URL-адрес, используя redux и react-router?

Я настраиваю студенческое приложение социальной сети. Я использую реагирующий, редукционный и реагирующий маршрутизатор. Мой компонент списка фидов хранит идентификатор студента от URL-адреса. Когда я использую реагирующий маршрутизатор, мой компонент не обновляется.

Я прочитал эту статью https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md и попытался завернуть свои компоненты в withRouter.

index.js:

ReactDOM.render(
    <Provider store = {store}>
        <Router>
            <Route path = "/" component = {App} />
            <Route exact path = "/sign/In" component = {SignIn} />
            <Route exact path = "/sign/Up" component = {SignUp} />
        </Router>
    </Provider>, document.getElementById('root'));

Приложение.js:

class App extends Component {
  render() {
    return (
      <Router id = "Page" >
        <div className = {this.props.AppStore.Theme}> 
          <header>
            <NavBar />
          </header>
          <Route exact path = "/" component = {HomePage} />
          <Route exact path = "/@:id" component = {feedpage} />
        </div>
      </Router>
    );
  }
}
const mapStateToProps = (state) => {
  return state
}
export default withRouter(connect(mapStateToProps)(App));

FeedPage.js:

class feedPage extends Component {
  componentDidMount() {
    const {dispatch} = this.props;
    API.requireFeed(this.props.match.params.id,"profil",20)
    .then((res) => {
      if (res){
        dispatch(postList(res));
      }
    })
  }
  render() {
    return (
      <div id = "Page">
        <div id = "mainPage">
          <div id = "centralCard">
            {this.props.postList.map((element) => (
              <div>
                <Link to = {'/@'+element.Pseudo}>{element.Pseudo}</Link>
                <p>{element.Content}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return state
}
export default withRouter(connect(mapStateToProps)(feedPage));

Я ожидаю обновления компонента каждый раз, когда я нажимаю ссылку на другую страницу канала.

У меня есть идея, как решить проблему, мне бы это понравилось :)

Поведение ключевого слова "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) для оценки ваших знаний,...
0
0
329
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас должен быть только один компонент маршрутизатора (тот, что в index.js), вложенная маршрутизация в вашем компоненте приложения не требует другого маршрутизатора, просто объявите свои маршруты.

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