javascript - 将我的网站链接粘贴到地址栏或单击转到我的网站的超链接时如何修复呈现的内容

Question

我目前正在我的作品集 React 网站上工作，它存储在我的 GitHub 存储库中，每当我将链接剪切并粘贴到地址栏或单击进入我的作品集页面的超链接时，唯一显示的就是标题以及页脚之间有空白区域。我可以让网站显示该网站的唯一方法是，我必须先单击网站上的其他链接，以便我的主页可以呈现。然后一切都很好，一切都可以正确渲染。

我已经删除了存储库并再次重新安装了 React 网站，然后我检查了我的路由器导入

这就是我设置应用程序组件的方式

import React, { Component } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import "./App.css";
import {
  Layout,
  Header,
  Navigation,
  Drawer,
  Content,
  Footer,
  FooterLinkList,
  FooterSection
} from "react-mdl";
import Main from "./components/main";
import { Link } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div className="demo-big-content">
        <Layout>
          <Header
            className="header-color"
            title={
              <Link style={{ textDecoration: "none", color: "white" }} to="/">
                David Piper
              </Link>
            }
            scroll
          >
            <Navigation>
              <Link to="/resume">Resume</Link>
              <Link to="/aboutme">About Me</Link>
              <Link to="/projects">Projects</Link>
              <Link to="/contact">Contact</Link>
            </Navigation>
          </Header>
          <Drawer
            title={
              <Link style={{ textDecoration: "none", color: "black" }} to="/">
                David Piper
              </Link>
            }
          >
            <Navigation>
              <Link to="/resume">Resume</Link>
              <Link to="/aboutme">About Me</Link>
              <Link to="/projects">Projects</Link>
              <Link to="/contact">Contact</Link>
            </Navigation>
          </Drawer>

          <Content>
            <div className="page-content" />
            <Main />
          </Content>

          <Footer className="header-color" size="mini">
            <FooterSection type="left" logo="Title">
              <FooterLinkList>
                <Link to="/">Help</Link>
                <Link to="/">Privacy & Terms</Link>
              </FooterLinkList>
            </FooterSection>
          </Footer>
        </Layout>
      </div>
    );
  }
}

export default App;

这是我的投资组合页面链接 https://dvd2x.github.io/dpiper-portfolio/

我希望每当我将链接剪切并粘贴到地址栏或指向网站的超链接时，所有内容都会像正常一样呈现

Answer 1

将单页面应用程序部署到 Github 页面可能很棘手。原因是 Github 没有从根 url / 为您的页面提供服务。 ，而是从 /dpiper-portfolio 为您的页面提供服务。因此， react 路由器尝试匹配 /dpiper-portfolio ，但没有找到任何内容，因此它没有提供任何路由。

尝试设置 basename in react router像这样。您需要使用 React Router v4 或更高版本。

<BrowserRouter basename="/dpiper-portfolio">...</BrowserRouter>

您可能还需要根据您是处于开发阶段还是生产阶段来有条件地设置基本名称。否则，你将不得不在 localhost:3000/dpiper-portfolio 进行开发。而不仅仅是 localhost:3000

另一个选择是使用 Github user page而不是项目页面。与项目页面不同，项目页面不是从根提供的，而是 username.github.io/projectname ，用户页面从根 url <username>.github.io 提供服务这将消除这个问题。