How to trick react router into thinking `/` is the mount directory?

问题

Let's say I have a simple react app:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route} from 'react-router-dom'
import * as serviceWorker from './serviceWorker';

import App from './App';
import About from './components/pages/About'
import Header from './components/layout/Header';

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Route path = "/" component={Header} />
      <Route exact path="/" component= {App} />
      <Route path="/about" component = {About} />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

where Header is like

import React from 'react'
import { Link } from 'react-router-dom'

const Header = () => (
    <header style={headerStyle}>
        <h1>My Fancy App</h1>
        <div><Link to="/" style={headerLinkStyle}>Home</Link> | <Link to="/about" style={headerLinkStyle}>About</Link></div>
    </header>
)

const headerStyle = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',

    padding: '.25em',

    background: '#333',
    color: 'white'
}

const headerLinkStyle = {
    color: 'white'
}

export default Header

This is working fine.

The problem, now, is when I host this on github pages.

Because of how github pages works, the page will be hosted on https://myGithubAccount.github.io/my-repo-name/

If I click the Home link, however, I won't be redirected to https://myGithubAccount.github.io/my-repo-name/, I will instead be redirected to https://myGithubAccount.github.io/

and similarly, the About link won't take me to https://myGithubAccount.github.io/my-repo-name/about but to https://myGithubAccount.github.io/about.

Now by some react witchery, that actually works -- so long as you don't try to reload the page -- but it's clearly suboptimal.

I can, of course, just change all my usages of / to /my-repo-name, but if I go down that rabbit hole, I will have to go back and change it when I later give it a proper URL and then again when I host it somewhere else, and then again when ...

I'd rather have react consider / to be wherever the application is hosted (which is how it should be for properly encapsulated web apps).

I.e. on localhost, / will be localhost:3000/ and on github pages, / will be https://myGithubAccount.github.io/my-repo-name/

How do I do that?

回答1:

Follow the below steps :

Set the basename

<Router basename={'/directory-name'}>
  <Route path='/' component={Home} />
  {/* … */}
</Router>

Set the app homepage(in package.json file)

"homepage": "https://myapp.com/directory-name",

Update the Routes

Router basename={'/subdirectory'}>
  <Route path={`${process.env.PUBLIC_URL}/`} component={Home} />
  <Route path={`${process.env.PUBLIC_URL}/news`} component={News} />
  <Route path={`${process.env.PUBLIC_URL}/about`} component={About} />
</Router>

Update the Links

<Link to={${process.env.PUBLIC_URL}/page-path}>…</Link>

For detailed information , have a look at this link https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1

来源：https://stackoverflow.com/questions/62640531/how-to-trick-react-router-into-thinking-is-the-mount-directory

标签

javascript

reactjs

react-router

github-pages