Question

路由时通常如何处理«URL basepath»（或位置）？

迷你示例：

'localhost/allworkouts' + pushState('target') => 'localhost/target'  ## OK
'localhost/me/workouts' + pushState('target') => 'localhost/me/target'  ## NOT OK

详细的例子，更接近我想要实现的目标。

<Route path="/" component={App}>
  <Route path="/allworkouts" component={AllWorkoutsList}/>

  <Route onEnter={requireLogin}>
    <Route path="/me/profile" component={Profile}/>
  </Route>
</Route>

class Profile extends React.Component {
  render() {
    return (
        // a list of the user's workouts
      <Link to='workout/:workoutId1'> </Link> // or pushState
      <Link to='workout/:workoutId2'> </Link>
      <Link to='workout/:workoutId3'> </Link>
        // these will go to localhost:3000/me/workout/xxx-yyyy
    );
  }
}

class AllWorkoutsList extends React.Component {
  render() {
    return (
        // a List of all available workouts in the universe
      <Link to='workout/:workoutId5'> </Link> // or pushState
      <Link to='workout/:workoutId6'> </Link>
      <Link to='workout/:workoutId7'> </Link>
        // this will go to localhost:3000/workout/1354-878656
    );
  }
}

我正在使用一个“间接”（me/）来帮助理解这条路线下的数据必须经过授权以及所有这些内容。但me/下的组件将路由到localhost:3000/me/workout/xxx-yyyy，这是一种不受欢迎的行为。当我使用Link或pushState时，我想要更多地控制URL基路径。

我错过了什么吗？

由于

URL路由位置会影响React-router pushState

0 个答案: