React 路由器和 Apache + Nginx 给出意外令牌 <

Question

我有 React 网站，其中路由是使用 react-router-dom 完成的，使用 localhost 一切正常。但是在我的生产服务器上，我使用哪个 Web 服务器（Nginx 或 Apache2 或 Apache2 + Nginx）与嵌套的 links 无关紧要 https://example.com/admin/list 我收到一个错误：

Uncaught SyntaxError: Unexpected token '<'    2.a3028c0a.chunk.js:1
Uncaught SyntaxError: Unexpected token '<'    main.1b4093c1.chunk.js:1 
Manifest: Line: 1, column: 1, Syntax error.   manifest.json:1

当您通过按钮转到嵌套 link 时，一切正常。

 <NavLink to="/admin/asics">

但是在刷新或直接进入后我得到了这个错误。

像 https://example.com/admin 这样的单个 link 一切正常。

那嵌套路由是怎么做的

App.js

<BrowserRouter basename="/">
  <Switch>
    <Route exact path="/" component={Miners} />
    <Route path="/admin" component={Admin} />
    <Route path="/gratitude" component={Gratitude} />
    <Route path="/firmware" component={Firmware} />
    <Redirect to="/" />
  </Switch>
</BrowserRouter>

Admin.js

<BrowserRouter>
  <Switch>
    <Route exact path="/admin/asics" component={Panel} />
    <Route path="/admin/advertising" component={AdminImgPanel} />
    <Route path="/admin/statistics" component={AdminStat} />
    <Redirect to="/admin/asics" />
  </Switch>
</BrowserRouter>

我在想可能是 web 服务器的问题，所以我尝试了 Apache2 和 .htaccess

RewriteEngine on 
# Don't rewrite files or directories 
RewriteCond %{REQUEST_FILENAME} -f [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule ^ - [L] 
# Rewrite everything else to index.html to allow html5 state links 
RewriteRule ^ index.html [L]

还有 Nginx 在 conf

中使用此代码

try_files $uri /index.html;

两者工作原理相同。

Answer 1

问题出在package.json，其中主页字段是一个点

"homepage": "."

并且您需要将其更改为斜杠

"homepage": "/"

React 路由器和 Apache + Nginx 给出意外令牌 <

React router and Apache + Nginx giving Unexpected Token <

apache

nginx

reactjs

react-router

react-router-dom