Reactjs 如何提取react路由器参数？_Reactjs_React Router_Url Parameters

Reactjs 如何提取react路由器参数？

reactjs

Reactjs 如何提取react路由器参数？,reactjs,react-router,url-parameters,Reactjs,React Router,Url Parameters,我有一个项目，其中更新页面的唯一方法是在url中写入一个值（假设必须这样）。应提取该值，并将其作为rest调用中的参数发送。我似乎找不到在App.js上设置路由并设法去掉url参数的方法我的App.js： function App() { useEffect(() => { getParam() //rest call code }) return ( <BrowserRouter> <Route path=&qu

我有一个项目，其中更新页面的唯一方法是在url中写入一个值（假设必须这样）。应提取该值，并将其作为rest调用中的参数发送。我似乎找不到在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;

函数应用程序（）{
useffect（（）=>{
getParam（）
//rest调用代码
})
报税表（
);
}
函数getParam（）{
设{date}=useParams
console.log（日期）
返回（{date}）
}
导出默认应用程序；

您可以在函数组件中使用

useparms

钩子：

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

导出默认函数Main（）{
设{date}=useParams（）；
日志（“路由日期：，日期”）
返回我的主要组成部分
}

当您将路由器设置为：

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>
  )
}

导出默认函数App（）{
返回(
)
}

有趣的是，在我完成改编的那一刻，你就进行了编辑（当然不是问题）。在这个版本中，您基本上只是在我的代码和App.js之间创建了一个新的层（DateComp），对吗？首先，感谢您迄今为止所做的所有努力。我唯一的问题是，现在我没有默认页面，这意味着当我没有/date时，什么都不会显示。我需要那里的默认页面。我尝试从中删除确切的属性，但仍然没有显示任何内容。您可以设置重定向来处理该问题。检查我的编辑。它现在工作得很好！谢谢你的帮助，真的很重要！您是否知道，如果我现在使用该url参数从进行rest调用，我可以使用中的数据吗？如果没有，我是否必须在App.js和其他组件之间建立一个新的抽象层，并在那里进行rest调用？