Replies: 1 comment
-
It seems like the Q&A Discussion creation button over in the react-router repository redirected me to the remix discussions. Will reopen this discussion over at react-router. Sorry for this |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I have a question about the usage of
<BrowserRouter>
in an embeddable widget that is used in other applications/pagesI am working on a embeddable App package with internal routing that I will refer to as
App A
in the following text.The internal routing is based on the
<BrowserRouter>
as it is important that a user is able to navigate to a subpath of App A directly using the address bar of the browser. I sadly cannot share its code as its a private repository but a simplified pagestructure looks like this/
: Landingpage of App A/users
: List of users of App A/settings
: Settings of App AThe problem:
App A is embedded in a NextJs environment and displayed under
/app
(clientside rendering). The app router based routing in NextJs for this isapp/app/[[ ... segments]]/page.tsx
in order to catch all subpaths of App A on that same page. When navigating directly to a path of App A everything works fine. (Basename of the BrowserRouter is set correctly)However, there are some navigation elements that should trigger page switches in the UI that surrounds App A on
/app
. A logo for example, that should redirect to the landinpage of App A. I planned on using thenext/navigation
hooks to navigate from within the NextJs environment to any App A subpath but I run into some problems.I would expect the BrowserRouter to react to this, since
next/navigation
uses thewindow.history
API to manage history state.And this "kind of works": But it seems like the BrowserRouter is lacking behind the actual history state by one entry.
Example A:
/
.router.push('/app')
provided bynext/navigation
to navigate to App A<Router basename="/app">
can not match URL "/" because it does not start with the basename. Therefore nothing gets renderedExample B :
/app
unsing the browsers address bar. App A gets rendered correctly/users
in App A. When clicked the URL changes (/app/users) but the UI does not change./settings
in App A, the URL changes to /app/settings and the BrowserRouter now displays /app/users.I am currently on
v6.25.1
ofreact-router-dom
.Any idea or input on this?
Beta Was this translation helpful? Give feedback.
All reactions