react-router 参数问题

Question

第一个City的跳转没问题，
第二加了参数的detail1路由跳转，页面也会变，但是刷新会出现404错误
第三个details打开新页面路由没问题，页面直接404错误
demo地址，希望有人可以指导一下，不知道哪里出问题了

Home组件

export default class Home extends React.Component {

  render() {
    return(
      <div>
        <div>Home</div>
        <Link to="/City">City</Link><br/>
        <Link to="/detail/1234" target="_blank">detail1</Link><br/>
        <Link to="/detail／1234">detail2</Link>
      </div>
    )
  }

}

路由配置

export default class AppRouter extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <Router>
          <div>
            <div>Header</div>
            <Switch>
              <Route exact path="/" component={Home}/>
              <Route path="/city" component={City}/>
              <Route path="/detail/:abc" component={City}/>
            </Switch>
            <div>footer</div>
          </div>
      </Router>
    )
  }
}

Answer 1

看看你的路由地址变化了没有啊！如果变成了detail/123，就说明路由起作用了啊

Answer 2

"/city"和"/detail/:abc"对应的同一的组件City，当然就没变化了