当我发布到 github 中的自定义域时，React Router 不呈现 path='/'

Question

我在 GitHub 中有一个存储库，我已将自定义域设置为 www.alessiochf.com

该应用未按照以下代码呈现主路线

import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
import PhotoApp from './PhotoApp'
import ScrollToTop from './scrollToTop'


const Main = () => (
  <main>
    <Switch>
     <ScrollToTop>
        <Route path='/' component={Home}/>
        <Route path='/PhotoApp' component={PhotoApp}/>
        <Route path='/About' component={About}/>
      </ScrollToTop>
    </Switch>
  </main>
)

export default Main

这是我的 Package.json 文件

{
  "name": "alessioch",
  "description": "Portfolio in React.js",
  "homepage": "http://www.alessiochf.com",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.5.3",
    "react-dom": "15.5.3",
    "react-router-dom": "4.1.1",
    "react-scroll-parallax": "^1.3.5",
    "surge": "^0.20.1"
  },
  "devDependencies": {
    "gh-pages": "^1.2.0",
    "react-scripts": "1.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

我错过了什么吗？谢谢

Answer 1

确保在 Home 路线上将 exact 属性设置为 true：

<Route exact path='/' component={Home}/>

Answer 2

最好将它移到底部，而不是使用 exact。这样它会将所有其他随机路径重定向到 /

 <ScrollToTop>
    <Route path='/PhotoApp' component={PhotoApp}/>
    <Route path='/About' component={About}/>
    <Route path='/' component={Home}/>
  </ScrollToTop>

当我发布到 github 中的自定义域时，React Router 不呈现 path='/'

React Router not rendering path='/' when I publish to custom domain in github

javascript

github-pages

reactjs

react-router-v4

react-router-dom