时间戳

首页 > 解决方案 > 在能够加载登录页面（Home 组件）之后，如何让其余的 React 组件通过 github 页面呈现？

reactjs - 在能够加载登录页面（Home 组件）之后，如何让其余的 React 组件通过 github 页面呈现？

问题描述

我一直在花费数小时试图让我的 create react 应用程序通过 git-hub 页面进行部署。我可以渲染登录页面/主页组件，但是一旦我单击导航链接，由于路径发生变化，我的其余组件将不会渲染。我在 react 中有正确的 prod 构建，并且我正在使用 HashRouter。由于我的主页加载而不是其他导航/组件，我认为这是一个简单的路线问题，但在我阅读了所有文档之后，我仍然无法解决问题。这让我很生气，哈哈。这是主页的链接。请注意，如果您单击导航链接，则会出现错误。 http://zonekid.github.io/TelevisionFavorites

对于 App.js

    `class App extends Component {
  render() {
    return (
    <React.Fragment>
<Container fluid>
    <Router basename="/">
    <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/twin-peaks" component={TwinPeaks}/>
    <Route path="/atlanta" component={Atlanta}/>

导航组件 (HomeNav.js)

    <Nav className="justify-content-center" activeKey="/home">

        <Nav.Item>
            <Color1>
          <Nav.Link className="nav-link" href="/atlanta" eventKey="link-1">Atlanta</Nav.Link>
          </Color1>
        </Nav.Item>
        <Nav.Item>
            <Color2>
          <Nav.Link href="/twin-peaks" eventKey="link-2">Twin Peaks</Nav.Link>
          </Color2>
        </Nav.Item>

`

标签： reactjsgithub-pages

解决方案

如果您的应用程序是使用 制作的create-react-app，您应该将您的设置basename为process.env.PUBLIC_URL而不是您当前的值，/如下所示：

<Router basename={process.env.PUBLIC_URL}>

推荐阅读