我正在学习使用 React Router 但我无法理解这种行为

Question

我有一个用于构建 Create-React-App 的 Express 服务器。当服务器正在监听时，我导航到 http://localhost:8000/ 并按预期获取我的页面，我单击链接并正确导航到它们 e。 g http://localhost:8000/someroute 按预期显示 UI 但是如果我重新加载页面（或直接从导航栏导航到它）它显示普通 JSON 而不是 UI.

这是一个展示该行为的回购协议 https://github.com/Prjoel/React-Router-Test.git

我不明白为什么当我从 npm start 脚本提供的开发服务器请求时它没有发生（一切正常）。

Answer 1

这与两个不同的路由器有关。我认为你说的路线是/random。当您从您的 React 应用程序中单击 link 时，路由由前端库 react-router-dom 处理。该页面实际上并没有得到刷新，而且浏览器中的 url 使用 javascript 进行了更改，并且 react-router 呈现了不同的组件。

当您手动刷新页面时，您要求浏览器向服务器请求“/random”

app.get('/random', (req, res, next) => {
  console.log('get request for random');
  const obj = { randomNumber: 'random ' + (Math.floor(Math.random() * 10)) }
  res.status(200).json(obj);
})

服务器 returns json 用于 /random 路由，这就是您看到 json 的原因。我的建议是在服务器端 API 路由前加上 /api.

我正在学习使用 React Router 但我无法理解这种行为

I'm learning to use React Router but I can't get to understand this behavior

javascript

node.js

express

create-react-app

react-router-dom