React router and Apache Nginx giving Unexpected Token <-CodePudding

I have React website where routing was done with react-router-dom and with localhost everything works fine. But on my production server it doesn't matter which web server I use (Nginx or Apache2 or Apache2 Nginx) with nested links like https://example.com/admin/list I am getting a error:

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

When you go to the nested link through the button everything works fine.

 <NavLink to="/admin/asics">

But after refresh or going directly I getting this error.

With single links like https://example.com/admin everything works good.

That how nested routing done

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>

I was thinking that maybe problem in web server, so I tried Apache2 with .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]

And also Nginx with this code in conf

try_files $uri /index.html;

Both works the same.

CodePudding user response：

The problem was in package.json where in homepage field was a dot

"homepage": "."

And you need to change it to a slash

"homepage": "/"