В чем разница между маршрутизацией в React и Express? - PullRequest
Новая
       19

В чем разница между маршрутизацией в React и Express?

2 голосов
/ 06 мая 2019

У меня проблемы с пониманием разницы между маршрутизацией во внешнем интерфейсе и бэкэнде.

Я понимаю, что React-маршрутизатор сопоставит компонент с URL-адресом, например: 

   <Router>
      <div>
        <Header />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>

А Express-роутер отобразит html-страницу на конкретный маршрут 

// GET method route
app.get('/', function (req, res) {
  res.render('index.html')
})

// POST method route
app.post('/', function (req, res) {
  res.redirect('/')
})

Я всегда думал, что внешний интерфейс отвечает за создание представлений, а внутренний интерфейс сопоставляет эти представления с маршрутом. Значение посещения маршрута приведет к отображению связанного шаблона.

Я не могу понять, как это меняется при использовании React-route и Express-router.

1 Ответ

3 голосов
/ 06 мая 2019

Ну, действительно, между ними есть разница.Когда вы используете реагирующий маршрутизатор , вы используете компоненты Router и Link для рендеринга компонента about , который отправит вам ссылку about page . 

<Link to='/about'>About</Link>
< Route path="/about" component={About} />

Это то же самое в express , если вы визуализируете представление следующим образом: 

app.get('/about', function (req, res) {
  res.render('about.html')
})

Давайте посмотрим, вам нужны данные вашей базы данных на внешнем интерфейсе.Если вы используете обычные механизмы просмотра, такие как ejs, handlebars, то после нахождения данных из db вы будете отображать их на html или ejs странице.

Если вы используете реагировать для одностраничного приложения, вам не нужномаршрутизатор.Но если в вашем приложении несколько страниц, тогда лучше использовать response-router.

См. Следующий пример кода: 

app.get('/about', function(req, res) {
// finding the user details from database
  user.find()(function(err, users) {
    if (err) {
        console.log(err);
    } else {
        res.json(users); //sends the user data
    }
});

А теперь React должен получить эти данные из бэкэнда,Это может быть сделано многими подходами, я предпочитаю использовать пакет axios , который представляет собой npm, выполняет ту же работу, что и FETCH API. 

 axios.get('http://localhost:5000/about')
      .then(response => {
           this.setState({users: response.data}); //this reponse.data is coming from backend
     })
     .catch(function (error) {
         console.log(error);
 })

Итак, теперь вы видите реагирующий маршрутизатор-dom не то же самое, что экспресс-маршрутизация.< Route path="/about" component={About} />, вы можете дать этому адресу все, что захотите, например, "/details" и т. Д. Вам нужно только указать axios.get(endpoint) адрес, который совпадает с конечной точкой экспресса.Но вы должны использовать Link от реакции-маршрутизатора-dom для перехода к точному конечному пути экспресс-маршрутизации.

<Link to='/about'>About</Link> должно совпадать с app.get('/about',.....)

Надеюсь,это решит ваши проблемы с пониманием реакции-маршрутизатора и экспресс-маршрутизацией.

...