Как создать кнопку, открывающую новую страницу с возможностью возврата на предыдущую страницу [ReactJS

Question

Справа под страницей вы видите кнопку « вернуться в журнал ». Если кто-то щелкнет по нему, он вернется на левую страницу. Итак, для этого я подумал, что использование реактивного маршрутизатора сделает свою работу. Но не знаю, как это исправить. Есть ли кто-нибудь, кто может помочь мне указать правильное направление. Имейте в виду, что новая вкладка не откроется!

Ссылка на рабочий фрагмент, чтобы понять общую картину моего приложения. Здесь фрагмент CodeSandBox

return (
<div>
    {info.map((show: any) => {
        console.log(show.show)
        return (
            <div key={show.show.id}>
                <ReactMarkdown source={show.show.name}/>

                {show.show.image && <img src={show.show.image.medium}/>}

                {show.show.genres.map((showGenre: string, index: number) => {
                    return (
                        <div key={index}>
                            <ReactMarkdown source={showGenre}/>
                        </div>
                    )
                })}
                <div>
                <Router>
                    <ul>
                        <li>
                            <Link to="/">See deta</Link>
                        </li>
                    </ul>
                </Router>

                </div>

            </div>
        )
    })}
</div>
)

Answer 1

Посмотрите этот рабочий пример (я поместил примечания в каждый файл):

https://codesandbox.io/s/modest-panini-hkzlv?file= / src / App. js

Обзор:

• есть несколько способов сделать это
• я предлагаю использовать историю npm и создать историю. js файл
• вам также понадобится используйте Router из response-router-dom
• в родительском компоненте или в провайдере контекста, вы можете сохранить свое состояние
• в родительском компоненте, использовать коммутатор и Route response-router-dom для размещения маршрутов
• в зависимости от реализации, условно визуализировать показать маршрут для asyn c state update
• в вашем поисковом компоненте, разместить все ваши ссылки с помощью response-router-dom
• при щелчке ссылки также должны обновлять состояние приложения, указанное вами c выбор
• этот выбор передается в маршрут / компонент показа
• в компоненте показа прикрепляет при щелчке, который использует историю. goBack и сбрасывает состояние

Answer 2

это может вам помочь:

this.props.history.goBack();

возвращается на предыдущую страницу