Question

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

我的基本理解是React-router会将组件映射到如下网址：

   <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

嗯，它们之间确实存在差异。当您使用反应路由器时，可以使用路由器和链接组件来呈现关于组件，该组件将向您发送关于页面链接。

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

如果您渲染这样的视图，则在 express 中也是如此：

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

让我们来看看，您希望数据库数据位于前端。如果您使用ejs之类的普通视图引擎，然后从数据库中找到数据后，将其呈现到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和Express路由的问题。

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

1 个答案: