Question

嗨，我正在尝试根据用户使用window.location.path的页面将以下内容设置为不同的数字

const [value, setValue] = React.useState(1);

我尝试了if语句，但似乎出错了，所以我的想法是设置参数

<Route exact path="/" component={Home} />

不过，据我了解，我可以做类似的事情

<Route exact path="/:id" component={Home} />

问题如下，如下所示，我有许多设置路径，导航栏中的选项卡链接到主路径（/，/ about，/ news，/ programs等）

<Switch>
           <Route exact path="/" component={Home} />
           <Route path="/about/" component={About} />
           <Route path="/news/:id" component={News} />
           <Route path="/programs/:id" component={Programs} />
           <Route path="/podcast/:id" component={Podcast} />


</Switch>

我希望能够为每条路线发送一个号码，这样我就可以用类似的方式设置以下内容

const [value, setValue] = React.useState({pageID});

我在想类似的东西

<Route path="/podcast/:id" pageID="4" component={Podcast} />

有人可以帮我指出正确的方法吗

Answer 1

假设您正在组件News中使用它

要从链接中提取参数的第一步是使用withRouter

将其导入您的组件News文件：import { withRouter } from "react-router";
我们需要将组件包装在withRouter HOC中，如下所示：

//instead of exporting it as export default News.
export default withRouter(News) //this will make the API we need available at the component's props

假设您要这样做：

const [value, setValue] = React.useState({pageID});

在componentDidMount内部的组件安装处，我们可以按以下方式提取参数：

const { id } = this.props.match.params //the id the user navigated to: /news/:id

然后您可以使用ID更新状态。

Answer 2

您可以尝试使用render方法将参数传递给组件。

<Switch>
  <Route exact path="/" render={(props) => <Home pageId=1 {...props} />} />
  <Route path="/about/" render={(props) => <About pageId=2 {...props} />}  />
</Switch>

Answer 3

您可以将多个参数添加为-

path="/podcast/:id/:pageId"

要检索-

this.props.match.params.pageId

如何基于URL设置React.useState

3 个答案: