Блог

Я знаю, что это кажется очевидным, но я пытаюсь использовать параметры URL на своем интерфейсе И иметь API в задней части для сбора данных. Я могу заставить работать любой из них, и я почти уверен, что это связано с моим app.js конфигурация

App.js

 var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var customsiteRouter = require('./routes/customsite');
var app = express();


app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

if(process.env.PORT){
app.use(express.static(path.join(__dirname, "client/build")));
app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname   "/client/build/index.html"));
});


app.use((req, res, next) => {
  next(createError(404));
});

app.use(function (err, req, res, next) {
  console.error(err.message);
  if (!err.statusCode) err.statusCode = 500;
  res.status(err.statusCode).send(err.message);
});
}
var cors = require('cors')

app.use(cors()) // Use this after the variable declaration
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/customsite', customsiteRouter);

//DB Setup
var mongoose = require('mongoose');
let MongoDB = process.env.DB
mongoose.connect(MongoDB, {useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false})
.then(()=>{console.log('CONNECTED!!!!!!!!!!!!:)')});
var DB = mongoose.connection;



module.exports = app;
 

Вот мой routes/users.js

 var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});


router.get('/:id', function(req, res, next) {
  res.send(`${req.params.id}`);
  console.log(req.params.id)
});

module.exports = router;
 

Вот тут-то все и запутывается.. Я использую CRA в папке клиента

 import logo from "./logo.svg";
import "./App.css";
import axios from "axios";
import React from "react";
import Website from "./Components/Website";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import BasicTabs from "./Components/BasicTabs";
import FormControlLabel from "@material-ui/core/FormControlLabel";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
} from "react-router-dom";

const useStyles = makeStyles((theme) => ({
  root: {
    "amp; > *": {
      margin: theme.spacing(1),
      width: "100%",
    },
  },
}));

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <div className="App">
            <BasicTabs />
          </div>
        </Route>
        <Route exact path="/website">
          <Website></Website>
        </Route>

        <Route exact path="/custom/:id">
          <Website />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;
 

Мой Вопрос

Я могу использовать URL-адрес www.mywebsite.com/custom/test

И компонент веб-сайта отображается с этим идентификатором

Мне также нужно уметь бегать www.mywebsite.com/users И пусть это отправится на задний план и вызовет запрос на получение API

Возможно ли сделать и то, и другое? Это мой экспресс App.js неправильно настроена для обработки обоих?

Все это на Героку

Я думаю, что предпочтительнее использовать https://www.postman.com/ для запуска тестов TWF его легко установить и использовать, и в целом, да, вы можете использовать их оба. Не видел никаких ошибок в вашем коде