将我的网站链接粘贴到地址栏中或单击指向我网站的超链接时如何修复呈现的内容答案

【问题标题】：How to fix my rendered content when pasting my website link into address bar or clicking on a hyperlink going to my website将我的网站链接粘贴到地址栏中或单击指向我网站的超链接时如何修复呈现的内容
【发布时间】：2019-09-11 16:08:59
【问题描述】：

我目前正在开发我的投资组合 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/

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

【问题讨论】：

我猜你正在使用 react-router，你的路由器代码在哪里？您可能只需要为/ 路径指定一个组件，但这里还不够。
这是 App 组件的其余部分： import { Link } from "react-router-dom"; class App extends Component { render() { return (

); } } 导出默认应用；
@DavidBey，请编辑问题以添加相关代码而不是对其发表评论。

标签： javascript reactjs

【解决方案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 提供的，这将消除此问题。

【讨论】：

谢谢，这是我在添加基本名称后需要的修复，一切都完美呈现

【解决方案2】：

问题在于您的反应路由器设置。如果您使用简历组件作为主页，则需要像这样设置路由

import Resume from './componentdirectory/resume'
import {BrowserRouter, Switch, Route} from 'react-router-dom';


<BrowserRouter>
         <Header></Header> 
                <Switch>
                    <Route path="/" component={Resume} exact/>
                </Switch>
         <Footer></Footer>
</BrowserRouter>

【讨论】：