如何欺骗反应路由器认为`/`是挂载目录？答案

【问题标题】：How to trick react router into thinking `/` is the mount directory?如何欺骗反应路由器认为`/`是挂载目录？
【发布时间】：2020-06-29 23:14:49
【问题描述】：

假设我有一个简单的 react 应用：

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 页面上托管它时。

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

但是，如果我点击Home 链接，我不会被重定向到https://myGithubAccount.github.io/my-repo-name/，而是会被重定向到https://myGithubAccount.github.io/

同样，About 链接不会将我带到https://myGithubAccount.github.io/my-repo-name/about，而是将我带到https://myGithubAccount.github.io/about。

现在通过一些反应巫术，这实际上是有效的——只要你不尝试重新加载页面——但它显然不是最理想的。

当然，我可以将我对/ 的所有用法更改为/my-repo-name，但是如果我进入那个兔子洞，我将不得不回去更改它，当我稍后给它一个正确的 URL 和然后当我将它托管在其他地方时，然后再次...

我宁愿考虑 / 是托管应用程序的任何地方（对于正确封装的 Web 应用程序来说应该是这样）。

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

我该怎么做？

【问题讨论】：

这能回答你的问题吗？ medium.com/@svinkle/…
@HarmandeepSinghKalsi 完美，谢谢。不过我应该提一下，在package.json 中设置homepage 属性是不够的，因为我已经这样做了。 <Router basename = {process.env.PUBLIC_URL}>，不过似乎工作正常。您想将您的评论扩展为答案以便我接受吗？
很高兴，我可以帮助你。我已经发布了相同的答案

标签： javascript reactjs react-router github-pages

【解决方案1】：

按照以下步骤：

设置基本名称

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

设置应用主页（在 package.json 文件中）

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

更新路线

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>

更新链接

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

欲知详情，请查看此链接https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1

【讨论】：

你指的是版本 2？