如何提取反应路由器参数? [英] How to extract a react router parameter?
本文介绍了如何提取反应路由器参数?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个项目，其中更新页面的唯一方法是在 url 中写入一个值(假设它必须是那样).该值应该被提取并作为一个参数在休息调用中发送.我好像没有找到在App.js上设置路由的方法，并设法取出url参数.
我的 App.js:
function App() {useEffect(() => {获取参数()//休息调用代码})返回 (<浏览器路由器><路由路径=/:日期"/><头/><div className="page-wrap"><Header className="header"/><主要/><页脚类名称=页脚"/></BrowserRouter>);}函数 getParam(){让 {date} = useParams控制台日志(日期)归期})}导出默认应用程序；
解决方案
你可以在函数组件中使用 useParams 钩子:
导出默认函数 Main() {让{日期} = useParams();console.log("date from route:", date)返回<>我是主要组件</>}当您将路由器设置为:
导出默认函数 App() {返回 (<浏览器路由器><开关><准确重定向 from="/";to=/some-date-here"/><路由精确路径=/:date"><头/><div className="page-wrap"><Header className="header"/><主要/><页脚类名=页脚"/></路线></开关></BrowserRouter>)}
I have a project where the only way to update the page is to write a value in the url (let's say it has to be that way). The value should get extracted and sent as a parameter in a rest call. I don't seem to find the way to set the route on App.js and manage to take out the url parameter.
My 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;
解决方案
You can use useParams hook in a function component:
export default function Main() {
let { date } = useParams();
console.log("date from route: ", date)
return <>I am Main Component</>
}
when you have router setup as:
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>
)
}
这篇关于如何提取反应路由器参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
