node.js - ReactJS+NodeJS：如何分离应用程序和 API 的路由？

Question

我有一个 React 应用程序，NodeJS 后端。我很难将网站应用程序的路由（例如website.com/homeor website.com/about）和作为包含 JSON 数据的端点的 URL （例如website.com/v1/usersor ）分开website.com/v1/tournaments。

这是我的app.js：

const PORT = process.env.PORT || 5000;
const env = process.env.NODE_ENV || 'development';

const express = require('express'),
      path = require('path'),
      mongoose = require('mongoose'),
      bodyParser = require('body-parser'),
      passport = require('passport');

const config = require('./backend/config/db')[env]; // load db
mongoose.connect(config.DB, { useNewUrlParser: true }).then(
    () => {console.log('Database is connected') },
    err => { console.log('Can not connect to the database'+ err)}
);

const users = require('./backend/routes/user'); 
const v1 = require('./backend/routes/v1'); 

const app = express();

// Serve static files from the React app -- added because of Heroku, the local app doesn't need this
app.use(express.static(path.join(__dirname, 'frontend/build')));


app.use(passport.initialize());
require('./backend/passport')(passport);

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// routes
app.use('/api/users', users);
app.use('/v1', v1);

app.get('/', function(req, res) {
    res.send('hello');
});

app.listen(PORT, () => {
    console.log(`Server is running on PORT ${PORT}`);
});

然后，在 React 前端文件夹中，我的文件App.js如下所示：

// react logic
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

// redus
import { Provider } from 'react-redux';
import store from './redux/store';

// authentication
import jwt_decode from 'jwt-decode';
import setAuthToken from './setAuthToken';
import { setCurrentUser, logoutUser } from './redux/actions/authentication';

// pages
import Navbar from './components/Navbar';
import Register from './components/Register';
import Login from './components/Login';
import Home from './components/Home';
import About from './components/About';
//import ApiV1 from './components/ApiV1';

// css
import 'bootstrap/dist/css/bootstrap.min.css';

if(localStorage.jwtToken) {
  setAuthToken(localStorage.jwtToken);
  const decoded = jwt_decode(localStorage.jwtToken);
  store.dispatch(setCurrentUser(decoded));

  const currentTime = Date.now() / 1000;
  if(decoded.exp < currentTime) {
    store.dispatch(logoutUser());
    window.location.href = '/login'
  }
}

export default class App extends Component {
    render() {
      return (
          <Provider store = { store }>
            <Router>
              <div>
                <Navbar />
                <Route exact path="/" component={ Home } />
                <div className="container">
                    <Route exact path="/home" component={ Home } />
                    <Route exact path="/about" component={ About } />
                    {/* <Route exact path="/v1" component={ ApiV1 } /> */}
                </div>
              </div>
            </Router>
          </Provider>
        );
    }
}

当我将 url 放入浏览器时website.com/v1/users，我看到的只是一个 React 前端布局，而不是包含数据库数据的所需 JSON 文件。

我需要如何修改路由/节点的 app.js 文件来实现这一点？

先感谢您。

编辑：

backend/routes/v1.js：

const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const passport = require('passport');

const User = require('../models/User');

passport.serializeUser(function(user, done) {
    done(null, user);
});
passport.deserializeUser(function(user, done) {
    done(null, user);
});

router.get('/v1', passport.authenticate('jwt'), function(req, res, next) {
    console.log('in /v1');

    User.find({}).sort('-createdAt').exec(function(err, fetched_users) {
        if(err) throw err;
        let users = {
            users: fetched_users
        };
        res.json(users);
    });    
});

module.exports = router;

标签： node.jsreactjsapirouter