React Typescript Router(5.1.8) 数据未作为查询参数传递给其他组件

Question

当我单击按钮时，我想导航到另一个组件并且需要传递一些数据作为查询参数。下面是我的反应代码。

界面道具{

    }
    
    const App: React.FC<Props> = ({}) => {
    
    
     return (
              <BrowserRouter>
                <Switch>
                   <Route path="/admin/NotificationManager/" exact  component={NotificationPanelComponent} />
                  <Route path="/admin/NotificationManager/notification/new" exact  component={NewNotification} />
                  <Route path="/admin/NotificationManager/notification/edit/:notificationId" exact component={NewNotification}/>
                </Switch>
              </BrowserRouter>
              
              
               <Button
                                onClick={() => {
    
                                     history.push('/admin/NotificationManager/notification/edit?notificationId=1234');
    
                                }}
                                text = "EDIT"
                                classN="editB"
                                disabled={false}
                            />
        );
    
    }

export default App;

interface Props{
    

}



const NewNotification: React.FC<Props> = ({}) => {

    const location = useLocation();
    const query = new URLSearchParams(location.search);

    console.log("query",query); // nothing prints

    const {notificationId} = useParams<{notificationId:string}>();//nothing print


}

export default NewNotification;

当我尝试在导航组件中打印参数值时，没有任何打印结果，甚至页面也未加载。

Answer 1

功能组件中的 React 路由器不会将路由参数作为 props 传递。它们可以通过 useParams() 钩子访问。在您的情况下，如果您想在 NewNotification.tsx

中获得 notificationId

const {notificationId} = useParams();

PS：不要混淆url参数和搜索查询，URLSearchParams(location.search);会访问搜索查询，在url中指定为http://something.com/page?firstQuery=1&secondQuery=something

Answer 2

问题

您正在导航至 "/admin/NotificationManager/notification/edit?notificationId=1234"。

这里的路径是 "/admin/NotificationManager/notification/edit"，queryString 搜索是 "?notificationId=1234"。没有完全与 "/admin/NotificationManager/notification/edit".

匹配的路径

这些是您呈现的路线：

<BrowserRouter>
  <Switch>
    <Route
      path="/admin/NotificationManager/"
      exact
      component={NotificationPanelComponent}
    />
    <Route
      path="/admin/NotificationManager/notification/new"
      exact
      component={NewNotification}
    />
    <Route 
      path="/admin/NotificationManager/notification/edit/:notificationId"
      exact
      component={NewNotification}
    />
  </Switch>
</BrowserRouter>

解决方案

在 NewNotification 中，您尝试使用几种方法来访问此通知 ID 值：

QueryString 搜索参数

const location = useLocation();
const query = new URLSearchParams(location.search);

在这里您需要通过访问适当的 queryString get 方法来访问 notificationId 值，即 query.get("notificationId").

要地址，您需要修复路由，以便它可以匹配您尝试路由到的路径：

<Route 
  path="/admin/NotificationManager/notification/edit"
  exact
  component={NewNotification}
/>

访问路由组件中的queryString值：

const location = useLocation();
const query = new URLSearchParams(location.search);
const notificationId = query.get("notificationId");

路由路径参数

const { notificationId } = useParams<{notificationId:string}>();

这里你需要传递 notificationId 作为路由参数然后也导航到正确的路径。使用模板化字符串将 notificationId 注入路径。

history.push(`/admin/NotificationManager/notification/edit/${1234}`);

或使用 generatePath 实用程序。

history.push(generatePath(
  "/admin/NotificationManager/notification/edit/:notificationId",
  { notificationId: 1234 }
));

访问路由组件中的notificationId路由参数：

const { notificationId } = useParams<{notificationId:string}>();

React Typescript Router(5.1.8) 数据未作为查询参数传递给其他组件

React Typescript Router(5.1.8) data is not passing to other component as a query params

typescript

reactjs

react-router

react-router-dom

问题

解决方案