React 和 Express 中的路由有什么区别

Question

我无法理解前端和后端路由之间的区别。

我的基本理解是 React-router 会将组件映射到 URL，例如：

   <Router>
      <div>
        <Header />

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

并且 Express-router 会将 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 时这会发生怎样的变化。

Answer 1

嗯，确实是有区别的。当您使用 react-router 时，您使用 Router 和 Link 组件来呈现 about 组件，它将向您发送 关于页面 link.

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

在 express 中有点相同，如果你渲染这样的视图：

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

让我们看看，您希望您的数据库数据在前端。如果你使用像 ejs 这样的普通视图引擎， handlebars 然后在从数据库中找到数据后将它们呈现到 html 或 ejs 页面。

如果您正在为单页应用程序使用 React，那么您不需要 React-router。但是如果你的应用有多个页面，那么使用 react-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);
 })

所以现在，您看到 react-router-dom 与快速路由不同。 < Route path="/about" component={About} />，你可以给这个地址任何你喜欢的东西，即 "/details" 等。你只需要提供 axios.get(endpoint) 地址，就像 express 端点一样。但是你必须使用 Link 从 react-router-dom 去到快速路由的确切端点路径。

<Link to='/about'>About</Link> 应与 app.get('/about',.....)

相同

希望这能解决您关于理解 react-router 和快速路由的问题。

React 和 Express 中的路由有什么区别

What is the difference between Routing in React and Express

reactjs

express

react-router

express-router