reactjs 如何在React Router 6中使用路由URL打开新页面?

4ioopgfo  于 2023-05-06  发布在  React
关注(0)|答案(1)|浏览(365)

我现在这样配置react路由:

import Home from "@/page/home/Home";
import PaySuccess from "@/page/pay/success/PaySuccess";
import { createBrowserRouter } from "react-router-dom";

const routes = createBrowserRouter([
    {
        path: "/",
        element: <Home />
    },
    {
        path: "/product/pay/success",

        element: <PaySuccess />
    },
]);

export default routes;

现在我想打开一个新的页面(在新标签中打开页面,而不是打开一个应用新页面),当访问url /product/pay/success时,如何配置?路由器版本为"react-router-dom": "^6.10.0",。我从互联网上搜索并阅读了文档https://reactrouter.com/en/main/routers/create-browser-router,似乎没有提到它。可能吗?这是index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './redux/store/store';
import { RouterProvider } from 'react-router-dom';
import routes from './redux/routes/routes';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={routes} />
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

我试过这样做:

{
    path: "/product/pay/success",
    target: '_blank',
    element: <PaySuccess />,
},
jdgnovmf

jdgnovmf1#

在React中重定向用户

简介

在本文中,我们将介绍如何在React应用程序中重定向用户。

场景

当你的React应用中发生了一些事情时,你希望将用户重定向到某个URL。问题是,那“东西”是什么?

如果是点击Link组件:

<Link to="/product/pay/success" params={myParams} target="_blank" />

如果是组件挂载:

1.确定第一个选项卡(之前打开的选项卡)上应该发生的事情
1.创建一个全新的Route并将其用于回调URL,我们将其命名为/temp_success

{
  path: "/product/pay/success",
  element: <PaySuccess />
},
{
  path: "/temp_success",
  element: <OpenNewTabAndRedirectSuccess />
}

1.编写此重定向功能的代码

export const OpenNewTabAndRedirectSuccess = () => {
  useEffect(() => {
    window.open("/product/pay/success", "_blank", "noreferrer");
  }, []);

  return (
    <div>
      Content that will stay on the original page.
      Otherwise, use navigate function from link below
    </div>
  );
};

更多资源

相关问题