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

Question

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

我希望路由在 App.js 组件中反映：

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

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

Answer 1

让我们假设您已经声明了这样的路由

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

并且您已经定义了 link <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)
  }

Answer 2

我认为我没有解释问题是我正在将一个组件 "Article" 映射到我有路由的组件 "Articles" 上： <Route path=`/newsarticle/${title}` component={Articles}/>

然而 Link 在第三个组件中，它将我们带到相关文章/${title}。

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

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

When using React-router, I want to pass location of Link to Route

javascript

reactjs

react-router

react-router-v4

react-router-dom