Skip to content
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

[Bug]: createMemoryRouter - Throwing a redirect in a loader/action, now changes the page URL #10010

Closed
adrianbrowning opened this issue Jan 31, 2023 · 4 comments · Fixed by #10033
Labels

Comments

@adrianbrowning
Copy link

adrianbrowning commented Jan 31, 2023

What version of React Router are you using?

6.8.0

Steps to Reproduce

I've created 2 examples, one that is working (version I've reverted to) and the latest, where it is now broken.

Working (v6.6.2): https://stackblitz.com/edit/react-ts-9g8mr3?file=App.tsx
Broken (v6.8.0): https://stackblitz.com/edit/react-ts-9gbuje?file=App.tsx

  1. Create a brand new project
  2. Install the latest version of react-router-dom (time of writing v6.8.0)
  3. In App.tsx add the following:
import * as React from 'react';
import './style.css';

import {
  RouterProvider,
  createMemoryRouter,
  Link,
  redirect,
  Form
} from 'react-router-dom';

const router = createMemoryRouter(
  [
    {
      path: '/first',
      element: <section>
      <Link to="/throw">Throw Redirect</Link>
      <Form method="post" action="/throw">
        <button type="submit">Post to throw</button>
      </Form>
    </section> 
    },
    {
      path: "/redirect",
      element: <section><p>I see you have found your way here :(</p><Link to="/first">Back to First</Link></section>
    },
    {
      path: '/throw',
      loader: () => {
        throw redirect('/redirect');
      },
      action: () => {
        throw redirect('/redirect');
      },
    },
  ],
  {
    initialEntries: ['/first'],
    initialIndex: 0,
  }
);

export default function App() {
  return (
    <RouterProvider router={router} fallbackElement={<p>Nothing here!</p>} />
  );
}
  1. Once the page is loaded, click Link Throw Redirect and notice the actual URL in the browser has been updated.

Expected Behavior

Like in v6.6.2, the URL should not update when using the memory router option.

Actual Behavior

The current behaviour is the URL is being updated with the thrown path.

@adrianbrowning adrianbrowning changed the title [Bug]: createMemoryRouter - Throwing a redirect in a loader, now changes the page URL [Bug]: createMemoryRouter - Throwing a redirect in a loader/action, now changes the page URL Jan 31, 2023
@brophdawg11
Copy link
Contributor

Thanks for the bug report! This is fixed in the above PR 👍

@brophdawg11 brophdawg11 added the awaiting release This issue have been fixed and will be released soon label Feb 2, 2023
@brophdawg11
Copy link
Contributor

This is fixed in 6.8.1-pre.0 if you want to give that spin to confirm. If all goes well we should have the stable release out tomorrow or early next week.

@brophdawg11 brophdawg11 self-assigned this Feb 2, 2023
@adrianbrowning
Copy link
Author

@brophdawg11 Thanks so much for fixing this!
Forked the broken example, and updated to use the new version: https://stackblitz.com/edit/react-ts-u8ebhw?file=App.tsx
Working nicely now!

@brophdawg11
Copy link
Contributor

This is now released in 6.8.1

@brophdawg11 brophdawg11 removed the awaiting release This issue have been fixed and will be released soon label Feb 6, 2023
@brophdawg11 brophdawg11 removed their assignment Feb 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants