У меня есть приложение React, бэкэнд NodeJS. Мне трудно разделить маршруты для приложения веб-сайта (например, website.com/home или website.com/about) и URL-адрес, который будет конечными точками, содержащими данные JSON (например, website.com/v1/users или 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.info('Database is connected') },
err => { console.info('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.info(`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, содержащий данные из базы данных.
Как мне для этого изменить файл routes / Node 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.info('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;
Привет @ Balanced02, маршрутизация React находится во втором блоке кода.
@ user2932090 Просто любопытно, зачем вам нужны конечные точки, содержащие данные JSON в дополнение к маршрутам вашего приложения?





Обновите свой вопрос и добавьте файл, в котором вы обрабатываете свою маршрутизацию, в приложении React. Думаю, именно в этом ваша проблема. Ваше приложение для реагирования уже перенаправляет весь URL-адрес на вашу страницу реагирования и не выполняет внешний вызов вашего api.