如何欺骗路由器以使`/`是安装目录? [英] How to trick react router into thinking `/` is the mount directory?

问题描述

假设我有一个简单的react应用程序:

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();

其中 Header 就像

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

这很好.

现在的问题是当我在github页面上托管它时.

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

由于github页面的工作方式，该页面将托管在 https://myGithubAccount.github.io/my-repo-name/

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

但是，如果我单击 Home 链接，则不会重定向到 https://myGithubAccount.github.io/my-repo-name/，我将改为重定向到 https://myGithubAccount.github.io/

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/

并且类似地， About 链接不会带我到 https://myGithubAccount.github.io/my-repo-name/about ，而是> https://myGithubAccount.github.io/about .

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.

我当然可以将我对/的所有用法更改为/my-repo-name ，但是如果我沿着那个兔子洞走，我将拥有返回并在以后给它提供适当的URL时进行更改，然后在将其托管在其他地方时再次更改，然后在...

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 ...

我宁愿做出反应，考虑将/放在应用程序的托管位置(对于正确封装的Web应用程序，应该是这样).

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

即在localhost上，/将是 localhost:3000/，在github页面上，/将是 https://myGithubAccount.github.io/my-repo-name/

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

我该怎么做?

推荐答案

请按照以下步骤操作:

1. 设置基本名称

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

1. 设置应用程序主页(在package.json文件中)

1. Set the app homepage(in package.json file)

主页":"https://myapp.com/directory-name"，

1. 更新路线

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>

1. 更新链接

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

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

有关详细信息，请查看此链接 https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1

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

这篇关于如何欺骗路由器以使`/`是安装目录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！