反应路由器历史记录无法正确呈现

Question

I'm using https://github.com/newtriks/generator-react-webpack to create an APP.

Everything is cool, I generate my dist files, but I upload my app on my website, like this: my-website.com/staging/my-app .

But when I navigate to my-website.com/staging/my-app it renders the error component, and If I press Home button, I see the homepage as excepted but the url in the navbar is my-website.com/ .

Answer 1

If your website doesn't located in the root url, you will need to provide a basename option

For example:

import createBrowserHistory from "history/lib/createBrowserHistory"
import { Router, useRouterHistory } from "react-router"

const browserHistory = useRouterHistory(createBrowserHistory)({
  basename: "staging/my-app",
})

// component
<Router history={ browserHistory } routes={ routes } />