reactjs - 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('/')
})

我一直认为前端负责创建 View ，后端会将这些 View 映射到路由。这意味着访问路线将呈现相关联的模板。

我无法理解在使用 React-route 和 Express-router 时这会发生怎样的变化。

Answer 1

嗯，它们之间确实有区别。当您使用 react-router 时，您使用 Router 和 Link 组件来呈现 about 组件，该组件将向您发送 about 页面 链接。

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

在 express 中有点相同，如果你呈现这样的 View :

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

让我们看看，您希望您的数据库数据位于前端。如果你使用像 ejs 这样的普通 View 引擎，handlebars 然后在从 db 中找到数据后，您将把它们渲染到 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)地址与快速端点相同。但是你必须使用 Link从 react-router-dom 到快速路由的确切端点路径。

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

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