React-router 获取可选的查询参数

Question

我一直在研究一些关于堆栈溢出的例子，以在 react-router 中定义可选的查询参数，最后发现它可以像

 {
    path: '/forms/simulacao/:journeyId?',
    exact: true,
    name: 'Home',
    component: Home,
    authRequired: true
  }

所以在下一步我想检索查询参数“journyeId”如果它在那里，所以我尝试了

const history=useHistory()
console.log(history.location)

但这似乎不起作用，解决方法应该是什么？？

"react-router": "^5.1.2", "react-router-dom": "^5.1.2",

Answer 1

首先你必须用路由器导出组件

export default withRouter(MyComp);

然后你将在 props 中有匹配的参数

let {journeyId} = props.match.param;

您的完整组件将是

const MyComp = (props)=>{
    let {journeyId} = props.match.param;

    return ...
}
export default withRouter(MyComp);

Answer 2

首先，:journeyId 是您的路线的一部分，而不是查询参数。查询参数应定义为路径：'/forms/simulacao?journeyId=something',

像这样，

Answer 3

有一个钩子：来自 react-router-dom

的 useParams

<Route path="/item/:id" component={NewsPage} />

之后，在 NewsPage 组件中，我将能够像这样从路由中获取 ID：

const params = useParams()
fetchNews(params.id).then(data => setNews(data))

以此类推

React-router get optional query parameter