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

【问题标题】：How to extract a react router parameter?如何提取反应路由器参数？
【发布时间】：2021-05-22 17:05:03
【问题描述】：

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

【问题讨论】：

标签： reactjs react-router url-parameters

【解决方案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>
  )
}

【讨论】：

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