У меня есть простое интерфейсное приложение React без серверной части. Я хочу иметь возможность открыть новую вкладку с заданным URI и иметь возможность вернуть правильную страницу с результатами. Я использую response-router-dom v5 для маршрутизации:
<Router>
<Route exact path="/" render={/* component with props*/}/>
<Route path="/search" render={/* component with props*/}/>
<Route exact path="/search/:name" render={/* component with props*/}/>
<Route exact path="/search/:name/artist=:selection/albums" render={/* component with props*/}/>
</Router>
В приложении, если бы я искал в строке поиска «jason», результаты показывались бы среди других, и я мог бы нажать «jason» Aldean». Когда я щелкаю по jason aldean, URI выглядит так: «http://localhost: 3000 / search / jason / artist = jason% 20aldean / album * ». Я хочу иметь возможность копировать и вставлять эту же ссылку в новую вкладку и показывать точно такие же результаты.
Чтобы даже получить результаты, мое приложение получает токен доступа из API-интерфейса spotify. Это обрабатывается в маршруте "/" (кнопка входа в систему запускает спойти вход в систему). После завершения входа в систему / search будет отображаться с токеном доступа в URI, затем я выполняю рендеринг / поиск без токена доступа в URI, но сохраняется в приложении.
Короче, что должно произойти, когда копирование URI в новую вкладку:
- Перенаправление для входа в систему spotify для получения токена доступа
- Перенаправление на "/ search"
- Перенаправление на основе URI params