-
Notifications
You must be signed in to change notification settings - Fork 11
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot use useStoryElement
at more than one route
#61
Comments
Can you explain why you want to render the story at two different locations ? |
I want to render my component with params at a given route, and then allow the user to click on some buttons that perform a navigation without the router throwing an error boundary because that route is not configured. In 1.0 any navigation that wasnt handled kept rendering the current component. |
Essentially I'm trying to handle 404s #51 |
Was there a resolution to this since it was closed? I have a good example to showcase for this feature. In our app we have one component that displays the login and signup pages. So in our Router we have the following: const Router = () => {
return (
<Routes>
<Route path={ROUTES.SIGNUP.path} element={<AuthPage />} />
<Route path={ROUTES.LOGIN.path} element={<AuthPage />} />
</Routes>
)
} In the component we have a export const Auth: Story = {
parameters: {
reactRouter: reactRouterParameters({
location: {
path: '/login',
},
routing: [
{ path: '/login', useStoryElement: true },
{ path: '/signup', useStoryElement: true },
],
}),
},
} But the above resulted in the same warning as OP. I had to do the following to fix it: routing: [
{ path: '/login', useStoryElement: true },
- { path: '/signup', useStoryElement: true },
+ { path: '/signup', Component: AuthPage },
] This works fine, but this results in the router thinking that it is still on the same |
Hum, that is a valid case. I don't understand why you say the router still think you are on the login page though. Your component renders based on the url, and the url changes, then it should work properly, doesn't it ? |
Maybe it's clearer in the video. When I click on the SignUp button, which is a Link that redirects to Not a huge deal tbh, just wanted to point out in case it's a bug? |
@eportet 2.0.11 is out and allow to inject the story multiple times. Can you check and confirm that it behaves as you expect ? |
Works like a charm thank you! |
@eloiqs you might be interested in this ;) |
Consider this exemple
When the story component navigates to
/demo
a blank page is rendered.In the console there is even a warning from history.ts
history.ts:501 Matched leaf route at location "/demo" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.
The text was updated successfully, but these errors were encountered: