Reactjs如何在URL参数中添加变量答案

【问题标题】：Reactjs how to add variable in URL parameterReactjs如何在URL参数中添加变量
【发布时间】：2022-01-06 16:35:41
【问题描述】：

我的后端的链接生成 ?id= 供我的前端使用 queryString 解析。有没有办法让这个链接在前端加载？

的http：//本地主机：？3000 / resetpassword / ID = 61bc1fbe3490be4f3594cc3e /标记= eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJfaWQiOiI2MWJjMWZiZTM0OTBiZTRmMzU5NGNjM2UiLCJmaXJzdG5hbWUiOiJPY2VhbiIsImxhc3RuYW1lIjoiUnlhbiIsImVtYWlsIjoib2NlYW5yeWFuNzI1QHlhaG9vLmNvbSIsInBob25lTnVtYmVyIjo2MjgxMTYxNTIyNjMyLCJkb2IiOiIyMDAwLTA3LTI1VDAwOjAwOjAwLjAwMFoiLCJwYXNzd29yZCI6IiQyYiQxMCR6Li9hMHFQYVFzdnNCUEtxc2QuaENlWmI3OWpIYW1VdHdXNmVnSEpLLlhndHFGZzV3djJ0bSIsIl9fdiI6MH0.21irj8fCPQFvCqmp-3E9BJmqwVp81gyQxIW5LgFplMg P>

App.js

import './App.css';
import { BrowserRouter,
         Routes,
         Route,
} from "react-router-dom"; //v6

import LandingPage from "./pages/LandingPage/LandingPage";
import ResetPwPage from "./pages/ResetPwPage/ResetPw";


function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LandingPage/>}/>
        <Route path="/resetpassword/:id/:token" element={<ResetPwPage/>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

我试过了

<Route path="/resetpassword/?id=:id/?token=:token" element={<ResetPwPage/>} />

但它不起作用。

我需要包含 ?id= 和 ?token= 的链接，因为我需要根据 queryString 的要求在前端获取 id 和 token 的值。

const parsed = queryString.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

非常感谢任何建议或替代方案。谢谢！

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

在react-router-dom 中，路由器和路由/路径不关心queryString，它们只关心URL 的路径部分。在 RRDv6 中，有一个新的 useSearchParams 钩子用于访问和读取 queryString。

路径

/resetpassword/?id=61bc1fbe3490be4f3594cc3e&token=eyJ0eX.....

从试图读取查询字符串的路径中删除位。

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LandingPage/>} />
        <Route path="/resetpassword" element={<ResetPwPage/>} />
      </Routes>
    </BrowserRouter>
  );
}

重置PwPage

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

...

const [searchParams] = useSearchParams();

...

const id = searchParams.get("id");
const token = searchParams.get("token");

【讨论】：