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

我目前正在处理我的portfolio React网站，它存储在我的GitHub存储库中，每当我将链接剪切并粘贴到地址栏或单击指向我的portfolio页面的超链接时，唯一显示的是页眉和页脚，中间有空白。我能让网站显示网站的唯一方法是，我必须先点击网站上的其他链接，这样我的主页才能呈现。那么一切都好了，一切都好了

我删除了存储库并重新安装了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;

import React，{Component}来自“React”；
从“react router dom”导入{BrowserRouter，Switch，Route}；
导入“/App.css”；
进口{
布局，
标题，
航行
抽屉，
内容,，
页脚，
页脚链接列表，
页脚部分
}从“反应mdl”；
从“/components/Main”导入Main；
从“react router dom”导入{Link}；
类应用程序扩展组件{
render（）{
返回(
简历
关于我
项目
接触
简历
关于我
项目
接触
帮助
隐私与条款
);
}
}
导出默认应用程序；

这是我的公文包页面链接

---

我希望每当我将链接剪切并粘贴到地址栏或指向站点的超链接时，所有内容都会像正常情况一样呈现，问题在于您的react router设置。如果你使用简历组件作为你的主页，你需要像这样设置你的路线

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>

import Resume from./componentdirectory/Resume'
从“react router dom”导入{BrowserRouter，Switch，Route}；

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

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>

import Resume from./componentdirectory/Resume'
从“react router dom”导入{BrowserRouter，Switch，Route}；

将单页应用程序部署到Github页面可能很棘手。原因是Github不是从根url

/

为您的页面提供服务，而是从

/dpiper portfolio

为您的页面提供服务。所以，react路由器尝试匹配

/dpiper公文包

，但什么也找不到，所以它不提供路由服务

试着像这样设置一个。您需要使用react router v4或更高版本

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

。。。

您可能还希望根据您是在开发中还是在生产中，有条件地设置basename。否则，您将不得不在

localhost:3000/dpiper公文包中开发，而不仅仅是
localhost:3000

另一个选项是使用Github而不是项目页面。不同于不是从根目录提供的项目页面，而是从根目录提供的
username.github.io/projectname
，用户页面是从根目录url
.github.io
提供的，这将消除此问题。
将单页应用程序部署到github页面可能很棘手。原因是Github不是从根url
/
为您的页面提供服务，而是从
/dpiper portfolio
为您的页面提供服务。所以，react路由器尝试匹配
/dpiper公文包
，但什么也找不到，所以它不提供路由服务

试着像这样设置一个。您需要使用react router v4或更高版本

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

。。。

您可能还希望根据您是在开发中还是在生产中，有条件地设置basename。否则，您将不得不在
localhost:3000/dpiper公文包中开发，而不仅仅是
localhost:3000

另一个选项是使用Github而不是项目页面。不同于不是从根目录提供的项目页面，而是从根目录提供的
username.github.io/projectname
，用户页面是从根目录提供的
.github.io
，这将消除此问题。
我猜您使用的是react router，您的路由器代码在哪里？您可能只需要为
/
路径指定一个组件，但这里没有足够的内容；类应用程序扩展组件{render（）{return（）；}}}导出默认应用程序@大卫比，请编辑问题，添加相关代码，而不是评论。我猜你在使用react路由器，你的路由器代码在哪里？您可能只需要为
/
路径指定一个组件，但这里没有足够的内容；类应用程序扩展组件{render（）{return（）；}}}导出默认应用程序@DavidBey，请编辑该问题以添加相关代码，而不是对其进行评论。谢谢这是我在添加basename后需要的修复所有内容都呈现完美谢谢这是我在添加basename后需要的修复所有内容都呈现完美