如何提取反应路由器参数？

Question

我有一个项目，其中更新页面的唯一方法是在 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;

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

如何提取反应路由器参数？

How to extract a react router parameter?

url-parameters

reactjs

react-router