使用 spa-github-pages 进行反应路由 - 无法向关于组件发送“/”和“/about”请求

Question

使用 react-spagithubpages 将此应用程序发布到 Github 页面，我希望我的关于组件响应对“/”和“/about”的调用，但我只能让它显示在一个，一个有几次尝试在一页上复制了组件，或者根本没有。

这是我拥有的：

App.js
<div className="container">
  <Header />
</div>

Header.js
<Switch>
  <Router>
    <Navbar >
      <Navbar.Brand>
        <Nav id="NavItem" style={brandStyle}>
          BRAND
        </Nav>
      </Navbar.Brand>
      <Navbar id="navButton">
        <Nav style={aListStyle}>
          <Link to="/about" id="NavItem" style={aStyle}>About.</Link>
          <Link to="/resume" id="NavItem" style={aStyle}>Resume.</Link>
          <Link to="/contact" id="NavItem" style={aStyle}>Contact.</Link>
        </Nav>
      </Navbar>
      <Route exact path="/" component={AboutComponent}/>
      <Route path="/about" component={AboutComponent}/>
      <Route path="/resume" component={ResumeComponent}/>
      <Route path="/contact" component={ContactComponent}/>
    </Navbar>
  </Router>
</Switch>

我尝试了以下变体：

1.

  <Route path='/' component={App}> // tried replacing App with {AboutComponent} or {Home}
    <IndexRoute component={AboutComponent}/>

    <Route path='/about' component={AboutComponent}/>
    <Route path='/resume' component={ResumeComponent}/>
    <Route path='/contact' component={ContactComponent} />
  </Route>

2.

<Router>
    {["/", "/about"].map(path => 
        <Route path={path} component={AboutComponent} />
    )}
</Router>

3.

<Router>
    <Route path="/(about|*|/)/" component={AboutComponent} />
</Router>

制作我自己的 routes.json 文件无济于事

我能想到的最后一件事是复制 AboutComponent 并创建一个单独的 HomeComponent 来发送“/”请求。

编辑： Vishal Sharma 建议使用重定向并且它有效。

<Redirect from='/' to='/about'/>

Answer 1

根据评论和结论，如果渲染组件相同，则没有必要编写单独的路由。在我看来，Redirect 服务更好。

示例： <Redirect from="/" to="/about"/>

使用 spa-github-pages 进行反应路由 - 无法向关于组件发送“/”和“/about”请求

Routing in react using spa-github-pages - unable to send '/' and '/about' requests to About component

url-routing

single-page-application

reactjs