Маршрут не соответствует в реагирующем маршрутизаторе

Question

Я учусь реагировать, поэтому я разрабатываю личный блог вместе с ним.Более того, я использую реагирующий маршрут, но у меня есть проблема, потому что я не понимаю, почему маршрут не отображается (route: / articule /: id).Вы можете увидеть код в хранилище .

В index.js определите маршрут:

//it  works
//index.js
const app = (
  <Router>
    <Switch>
      <Route exact path="/" component={IRMBlog} />
      <Route path="/articule/:id"  component={IRMArticule}/>
    </Switch>
  </Router>
);

Но если я переместу строку <Route path="/articule/:id" component={IRMArticule}/> в другой файл, это не сработает, почему?

Файл, когда я перемещаю строку кода: irm-articule-list.js

render() {
return (
  <div className="column is-10 is-offset-1">
    <IRMArticuleBox></IRMArticuleBox>
    <IRMArticuleBox></IRMArticuleBox>
    <Route path="/articule/:id"  component={IRMArticule}/>
  </div>
);

}

В файле irm-articule-box.js, у меня <Link to="/articule/001">

Answer 1

Вот так.

import React, { Component } from 'react;
import { Link } from 'react-router-dom';

class articuleDetails extends Component {
 render(){

   return (
   .....
    <Link to="/articule/123"> articule name</Link>
   ...
   )    

 }
}

Answer 2

Почему вы хотите переместить это?В общем, вы должны знать, что Маршрут должен быть внутри Маршрутизатора, и его задача - сообщить браузеру, какой компонент визуализировать, когда его путь соответствует местоположению.Это не гиперссылка, как тег в HTML.Если ваше намерение было гиперссылкой, вы должны использовать <Link to="/">

Answer 3

Поскольку приложение должно иметь только один маршрутизатор, а маршрутизатор реагирует на это почти как корневой компонент, один вход для сопоставления ваших URL