使用 React-router 时，我想将 Link 的位置传递给 Route答案

【问题标题】：When using React-router, I want to pass location of Link to Route使用 React-router 时，我想将 Link 的位置传递给 Route
【发布时间】：2019-11-07 17:05:43
【问题描述】：

如果我在子组件中设置如下链接：

我希望 Route 在 App.js 组件中反映这一点：

这样做的原因是，如果文章页面在浏览器中刷新，我希望它呈现最后加载的“/newsarticle/${title}”，而不是只呈现“/newsarticle/”而不传递给新闻文章的组件中的任何数据。

也许这做不到，我需要确保在服务器端进行路由。

【问题讨论】：

标签： javascript reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

假设你已经声明了这样的路由

<Route path="/article/:id" component={Article} />

并且您已经定义了链接<Link to="/article/4334">my article</Link>，单击它会加载路由，以便访问传递给路由的参数，您可以尝试这种方式

/* in Class based component */
class Article extends React.Component{
    constructor(props){
        console.log(this.props.match.params.id) //where you access the id
    }
    /* rest of the code */
} 


/* in functional Component by using hooks */
  import {useParams} from  'react-router-dom'

  function Article(){
      let params = useParams()
       console.log(params.id)
  }

【讨论】：

我认为我没有解释问题是我将组件“文章”映射到我有路由的组件“文章”上：<Route path=`/newsarticle/${title}` component={Articles}/> 但是链接位于第三个组件，它将我们带到相关文章/${title}。我想要实现的是在刷新页面时将 URL 保留为 article/${title} 和显示的最后一个标题，从而呈现最后呈现的文章的内容。

【解决方案2】：

我认为我没有解释问题是我将组件“Article”映射到我拥有路由的组件“Articles”： <Route path=`/newsarticle/${title}` component={Articles}/>

但是，该链接位于第三个组件中，它会将我们带到相关文章/${title}。

我想要实现的是在刷新页面时将 URL 保留为 article/${title} 和显示的最后一个标题，从而呈现最后呈现的文章的内容。

【讨论】：