Question

我在main.js

中进行了此设置

<Router history={history}>
  <Route path="/" component={Window}>
    <IndexRoute component={Users} />
    <Route path="users" component={Users}>
      <Redirect from="add" to="edit" />
      <Route path="edit(/:id)" component={UserEdit} />
    </Route>
    <Route path="groups" component={Groups} />
    <Route path="permissions" component={Permissions} />
    <Route path="*" component={Error} />
  </Route>
</Router>

如果网址变为users/add或users/edit UserEdit组件可用作Users组件的子级，那么此代码Users.js

render() {
  return (
    …
    {this.props.children}
  );
}

马上给我表格。但是我希望将渲染结果显示为Window组件的子组件，在这种情况下，它是Users的父组件。

我怎样才能实现这一目标？

Answer 1

嘿我试图重新创建您的示例以检查是否需要添加父路径以在父组件内呈现子组件。这是代码。要重新创建它，只需在react-router示例中创建一个文件夹，然后添加index.html并在app.js中复制此代码

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Route, Link,IndexRoute,Redirect } from 'react-router'

import withExampleBasename from '../withExampleBasename';

const Window = (props)=> {
  return (<div>
    Window
    {props.children}
  </div>);
};
const Users = (props)=> {
  return (<div>
    Users
    {props.children}
  </div>);
};

const UserEdit = (props)=> {
  return (<div>
    UserEdit
    {props.children}
  </div>);
};

const Groups = (props)=> {
  return (<div>
    Users
    {props.children}
  </div>);
};

const Permissions = (props)=> {
  return (<div>
    Permissions
    {props.children}
  </div>);
};

const Error = (props)=> {
  return (<div>
    Error
    {props.children}
  </div>);
};

render( (
  <Router history={withExampleBasename(browserHistory, __dirname)}>
    <Route path="/" component={Window}>
      <IndexRoute component={Users}/>
      <Route path="users" component={Users}>
        <Redirect from="add" to="edit"/>
        <Route path="edit(/:id)" component={UserEdit}/>
      </Route>
      <Route path="groups" component={Groups}/>
      <Route path="permissions" component={Permissions}/>
      <Route path="*" component={Error}/>
    </Route>
  </Router>

), document.getElementById( 'example' ) )

现在，路由器设置与您在问题中提到的相同。我把一切都搞定了，我的意思是UserEdit总是呈现为用户的孩子，实习生被渲染为Window的孩子。

Answer 2

您可以移动users/edit路线并将edit(/:id)更改为users/edit(/:id)：

<Router history={history}>
  <Route path="/" component={Window}>
    <IndexRoute component={Users} />
    <Route path="users/edit(/:id)" component={UserEdit} />
    <Route path="users" component={Users}>
      <Redirect from="add" to="users/edit" />
    </Route>
  </Route>
</Router>

Answer 3

我使用路由中子页面的绝对路径解决了相同的问题： / users_add而不是users / add / users_edit，而不是用户/ edit

对不起，但我找不到更好的解决方案。

REACT-ROUTER - 父组件中的渲染输出

3 个答案: