При использовании React-роутера я хочу передать местоположение Link to Route

Question

Если я устанавливаю ссылку следующим образом в дочернем компоненте:

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

Я хочу, чтобы маршрут отражал это в компоненте App.js:

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

Причина этого в том, что если страница статьи обновляется в браузере, я хочу, чтобы она отображала последнюю загруженную `/ newsarticle / $ {title} ', а не только отображала'/ newsarticle /' без каких-либо данных от компонента, переданного в newsarticle.

Возможно, это невозможно, и мне нужно убедиться, что маршрутизация выполняется на стороне сервера.

Answer 1

Не думаю, что я объяснил, что проблема в том, что я сопоставляю компонент "Статья" с компонентом "Статьи", для которого у меня есть маршрут: <Route path=`/newsarticle/${title}` component={Articles}/>

Однако ссылка находится втретий компонент, который ведет нас к соответствующей статье / $ {title}.

Я пытаюсь достичь при обновлении страницы URL-адреса, который останется как article / $ {title}, и последнего заголовка. показано, таким образом отображая содержание последней статьи, которая была отображена.

Answer 2

Допустим, вы объявили маршруты, подобные этому

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