关于React-router嵌套的问题

Question

题目描述

如何通过绝对路径访问某个组件的子组件？

相关代码

router.js（总路由）

export default class RouteConfig extends Component {
  render () {
    return (
      <Router>
        <Switch>
          <Route path="/" exact>
            <Redirect to="/login" />
          </Route>
          <Route path="/login" component={Login} />
          <Route path="/home" component={Home} />
          <Route component={NoMatch} />
        </Switch>
      </Router>
    )
  }
}

home.jsx（这一步感觉多余，是不是应该直接用layout好点呢？）

export default function Home (props) {
  return <div>
    <Layout {...props} />
  </div>
}

layout.jsx

export default class Layout extends Component {
  render () {
    return <div className="layout-box">
      <Header />
      <Aside />
      <div className="container">
        <Content {...this.props} />
        <Footer />
      </div>
    </div>
  }
}

content.jsx（带父组件路由前缀的）

const Content = ({ location }) => {
  return <div className="content-box">
    <Redirect from='/' to='/home/bikes' />
    <Route path='/home/bikes' component={Bikes} />
    <Route path='/home/users' component={Users} />
  </div>
}

export default Content

content.jsx（不带父组件路由前缀的）

const Content = ({ location }) => {
  return <div className="content-box">
    <Redirect from='/' to='/bikes' />
    <Route path='/bikes' component={Bikes} />
    <Route path='/users' component={Users} />
  </div>
}

export default Content

你期待的结果是什么？

现在的情况是如果带父组件前缀，也就是/home/bikes, /home/users,可以正常访问<Bikes />,<Users />组件,可是这样看这路径很丑陋，我想直接localhost:3000/bikes就能访问<Bikes />，并且Bikes还是放在<Home />的子组件中，如何处理呢？

Answer 1

你可以这样写：

export default class RouteConfig extends Component {
  render () {
    return (
      <Router>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/*" component={Home} />
          <Route path="/" exact>
            <Redirect to="/login" />
          </Route>
          <Route component={NoMatch} /> // 这个应该就只有移动到home去处理了
        </Switch>
      </Router>
    )
  }
}