Блог

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

Путь маршрута-это: <Route path="/page/{:id}" component={Body} />

Это тело вызова, которое является моим основным компонентом класса, в котором находится большая часть кода и логики. Но большинство потоков и учебных пособий, которые я видел, используют либо useEffect, либо useParams, что невозможно сделать в компоненте класса.

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

Так что сейчас я делаю то, что у меня есть тег ссылки, обернутый вокруг моих кнопок с номерами страниц <Link key={index} to={`/page/${links.label}`}> . Эти кнопки находятся в отдельном функциональном компоненте. И я вижу изменение URL-адреса в зависимости от того, на какой странице я нахожусь. Но я хочу настроить его так, чтобы я мог напрямую вводить URL-адрес.

кнопки:

 const renderPageNumbers = apiPagingSliced.map((links, index ) => {
        return <Link key={index} to={`/page/${links.label}`}>
                    <button key={index} id={links.label}
                    onClick={props.handleClick}
                    >{links.label}
                    </button>
                </Link>
        })
 

и это просто кажется очень неполным. Я попытался использовать параметры использования, но не смог заставить его работать.

Добавьте это в свой компонент тела, чтобы при изменении параметров идентификатора вашей страницы получить обновление и обновить локальное хранилище тоже

 componentDidUpdate(prevProps, prevState, snapshot){
        if(prevProps){
            if(prevProps.match.params.id !== this.props.match.params.id){
                const id = this.props.match.params.id;
                localStorage.setItem("currentPage", id)
                this.setState ({
                    currentPage: id});
                this.fetchApi(id);
            }
        }
    }