React Router 6 navigate to new tab with state

Question

How to add target='_blank' in navigate?

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

navigate(`/record`, {
      state: {
        eventId: event.id,
      }
    });

Drew Reese · Accepted Answer · 2022-09-02 06:12:51Z

5

The navigate function isn't capable of doing this, it can only navigate within the app in the same window/tab.

You can use the following:

Link passing a target="_blank" prop.

<Link to="/record" target="_blank">
  /record
</Link>

Anchor tag using a target="_blank" attribute.

<a href="/record" target="_blank">
  /record
</a>

window.open in a callback.

const navigateOutApp = () => window.open("/record", "_blank", "noreferrer");

...

<button type="button" onClick={navigateOutApp}>
  /record
</button>

If you need to also pass "state" then you will need to temporarily store it in localStorage and retrieve it when the app and target component mount.

const navigateExternal = (target, options) => {
  if (options.state) {
    localStorage.setItem("state", JSON.stringify(options.state));
  }
  window.open(target, "_blank", "noreferrer");
};

const Bar = () => {
  const [state, setState] = useState(JSON.parse(localStorage.getItem("state")));

  const location = useLocation();

  useEffect(() => {
    localStorage.removeItem("state");
  }, []);

  useEffect(() => {
    if (location.state) {
      setState(location.state);
    }
  }, [location]);

  useEffect(() => {
    console.log("Passed state", { state });
  }, [state]);

  return (
    <>
      <h1>Bar</h1>
      <div>State: {JSON.stringify(state)}</div>
    </>
  );
};

Demo

edited Sep 2, 2022 at 6:12

answered Sep 2, 2022 at 4:36

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vince Frost Over a year ago

then I can't pass state to a new tab?

Drew Reese Over a year ago

@VinceFrost Ah, sorry, missed that bit. For that you'll need to store what you want to pass in "state" in localStorage to be retrieved in the new browser context. I've updated my sandbox with internal/external examples with passing state.

Meet Bhalodiya · Accepted Answer · 2022-09-02 04:36:53Z

0

Hello You can use a simple approach for this

<Link to="/yourRoute" target="_blank">
    Take me to other page
</Link>

According to react-router-dom the <a> tag is replaced by <Link> tag so you can use all <a> tag attributes on Link tag.

answered Sep 2, 2022 at 4:36

Meet Bhalodiya

96213 silver badges30 bronze badges

Collectives™ on Stack Overflow

React Router 6 navigate to new tab with state

2 Answers 2

Demo

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related