你能有一个 Express API 并使用 React Router Dom 吗？答案

【问题标题】：Can you have an Express API and use React Router Dom?你能有一个 Express API 并使用 React Router Dom 吗？
【发布时间】：2021-11-23 03:20:50
【问题描述】：

我知道这看起来很明显，但我正在尝试在前端使用 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;

这是我的路线/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: {
    "& > *": {
      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;

我的问题

我可以使用网址www.mywebsite.com/custom/test

网站组件使用该 ID 呈现

我还需要能够运行 www.mywebsite.com/users 并将其发送到后端并调用该 API GET 请求

两者都可以吗？我的 Express App.js 是否设置不正确，无法同时处理这两种情况？

这一切都在 Heroku 上

【问题讨论】：

标签： javascript reactjs api express routes

【解决方案1】：

我认为最好使用https://www.postman.com/ 来运行 TWF 测试，它易于安装和使用，一般来说，是的，你可以同时拥有它们。没有发现您的代码有任何错误

【讨论】：