Question

我的反应路由器工作正常..但我想从Path得到title的日期，它需要一个字符串。

  <Route exact path="/meeting/:date"
              breadcrumb="Meetings"
              title={DATE}
              component={(props) => (
                <FooComponent
                  date={props.match.params.date} />
              )}
            />

感谢

Answer 1

在初始组件中，设置加载路线的路径。通过在路径末尾添加/：date，可以通过调用该路由组件中的props.match.params.date来访问该字符串。

<Route exact path="/meeting/:date" component={DateComponent} />

在路线渲染的组件中，使用props.match.params.date从路径

访问您的字符串

Class DateComponent extends React.Component{
  render(){
    return(
      <h2>{this.props.match.params.date}</h2>
    )
  }
}

https://reacttraining.com/react-router/web/api/match

Answer 2

我想在这里问一个非常类似的问题（这就是为什么我宁愿继续执行线程而不发起新的线程）。

如何设置变量的路径？基于链接元素按下的设置有很多示例。在我的情况下（Redux + React +路由器），我有一个应用程序可以接受客户输入，如果输入正确，它将通过存储将数据感知到组件。现在只有

<Route path="/fruits"> <FruitData /> </Route>

，我希望它可以动态地更改为给定的水果（实际上，我会在浏览器地址栏中看到所选水果的名称）。如何实现？关于效果阅读的阅读材料很多，但根据写作没有发现任何适用的内容。我的原始想法是通过存储传递变量并使路由器的常规组件具有连接功能，但是我想可能会有更好的解决方案

Answer 3

我使用Helmet，它允许您更新标题，元数据，脚本以及与标题相关的任何内容。

安装后，只需将以下代码添加到FooComponent或公共父组件即可。

<Helmet>
  <title>{props.match.params.date}</title>
</Helmet>

Answer 4

react-router-dom 5.1中有一个新的api

https://github.com/ReactTraining/react-router/releases/tag/v5.1.0

import {useParams} from "react-router-dom";

function MyComponent(){
    const {date} = useParams()
}

如何从反应路由器的路径中获取变量？

4 个答案: