Search code examples
reactjsroutesreact-routerweb-deploymentwebdeploy

React Router fail to direct access subpage when deployed

When I am working in localhost, using create-react-app

I am able to access localhost:3000/A or localhost:3000/B

But when I deploy it to the server, npm build run and put the built file to the server folder like to the https://ip/project_name

I can click in the <Link/> to go to https://ip/project_name/A or https://ip/project_name/B but I cannot direct access to https://ip/project_name/A.

App.js

<BrowserRouter basename={'project_name'}>
    <Route path='/A' component={A}/>
    <Route path='/B' component={B}/>
</BrowserRouter>

Link

<Link to="/A">A</Link>
<Link to="/B">B</Link>

package.json

"homepage": ".",
...
"dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0"
}
Solution

  • The problem is in the server folder, the react router setting is correct.