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

Question

我有一个 Express 服务器，用于构建 Create-React-App。 当服务器正在监听时，我导航到 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 应用程序单击链接时，路由由前端库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);
})

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

Answer 2

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

这是一个显示行为https://github.com/Prjoel/React-Router-Test.git的存储库

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