如何提取react-router参数？

IT技术 reactjs react-router url-parameters
2022-07-28 01:53:39

我有一个项目，其中更新页面的唯一方法是在 url 中写入一个值（假设它必须是这种方式）。该值应该被提取并作为参数在休息调用中发送。我似乎没有找到在 App.js 上设置路由并设法取出 url 参数的方法。

我的 App.js：

function App() {
  useEffect(() => {
    getParam()
    //rest call code

  })
  return (   
    <BrowserRouter>
      <Route path="/:date"/>
        <Head />
        <div className="page-wrap">
          <Header className="header"/>
          <Main />
          <Footer className="footer"/>
        </div>
      
    </BrowserRouter>
  );
}

function getParam(){
    let {date} = useParams
    console.log(date)
    return({date})
}
export default App;
1个回答

您可以useParams在函数组件中使用钩子：

export default function Main() {
  let { date } = useParams();
  console.log("date from route: ", date)
  return <>I am Main Component</>
}

当您将路由器设置为：

export default function App() {
  return (
    <BrowserRouter>
    <Switch>
      <Redirect exact from="/" to="/some-date-here"/>
      <Route exact path="/:date">
        <Head />
        <div className="page-wrap">
          <Header className="header"/>
          <Main />
          <Footer className="footer"/>
        </div>
      </Route>
    </Switch>
    </BrowserRouter>
  )
}
其它你可能感兴趣的问题
上一篇react js中的动态路由，无法在路由中分配字符串中的组件名称 下一篇存储在 IE11 中不更新（react redux）