使用 React-router 时，我想将链接的位置传递给路由

Question

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

<Link className="article-link" to={`/newsarticle/${title}`}>

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

<Route path=`/newsarticle/${title}` component={NewsPage}/>

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

也许这无法完成，我需要确保在服务器端进行路由。

Answer 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)
  }

Answer 2

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

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

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