Question

我尝试显示带有长链接列表的侧边栏，然后在点击其中任何一个时，会在右侧添加一个组件，其中包含有关所点击链接的信息。

目前，它一次只渲染一个组件。

这是我的主要渲染方法，包含所有路线。

render(
  <Provider store={store}>
    <Router history={hashHistory}>
      <Route path="/">
        <IndexRoute component={App} />
        <Route path="/p/:personId" component={Person} />
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root')
);

我还尝试使用所有路径的主渲染方法。

render(
  <Provider store={store}>
    <Router history={hashHistory}>
      <Route path="/" component={App} />
      <Route path="/p/:personId" component={Person} />
    </Router>
  </Provider>,
  document.getElementById('root')
);

这是我的App组件。

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Sidebar />
        {this.props.children}
      </div>
    )
  }
}

这是我的Person组件。

export class PersonComponent extends React.Component {

  constructor(props) {
    super(props)

    this.personId = this.props.params.personId
    this.person = this.props.people.find(person => person.id === this.personId)
  }

  render() {
    return (
      <div>
        <h2>{this.person.name}</h2>
        <div>
          <h5>email: {this.person.email}</h5>
          <h5>age: {this.person.age}</h5>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    people: state.people
  }
}

const Person = connect(mapStateToProps)(PersonComponent)
export default Person

Answer 1

如果您想在fooContext.fooA.Add(fooARecord);中将Person作为子组件传递，则需要进行以下配置

App

在'/'位置

上呈现默认页面需要

render( <Provider store={store}> <Router history={hashHistory}> <Route path="/" component={App}> <Route path="/p/:personId" component={Person} /> </Route> </Router> </Provider>, document.getElementById('root') );

React路由器无法显示多条路由

1 个答案: