Question

我有以下routes.jsx：

ReactDOM.render((
    <Router>
        <Route component={Wrapper} >
            <Route path="/" component={Home} />
            <Route path="projects" component={Projects} />
            <Route path="projects/Margam" component={Margam} />
            <Route path="projects/Margam2" component={Margam2} />
            <Route path="projects/Margam3" component={Margam3} />
        </Route>
    </Router>
), document.getElementById('app'));

Margam，Margam2和Margam3是相同的组件，但只是具有不同的数据。这基本上是具有相同设计但内容不同的项目列表。

是否可以生成动态传递不同数据但始终使用相同组件的路由？

马格姆：

import React from 'react';

import Video from './video.jsx';

class Margam extends React.Component {
  render () {
    return (
        <div>
            <h2>Margam</h2>
            <Video />
        </div>
    );
  }
}

export default Margam;

Margam2：

import React from 'react';

import Video from './video.jsx';

class Margam extends React.Component {
  render () {
    return (
        <div>
            <h2>Margam 2</h2>
            <Video />
        </div>
    );
  }
}

export default Margam2;

Answer 1

你可以这样做：

<Route component={Wrapper} >
     <Route path="/" component={Home} />
     <Route path="projects/:id" component={Projects} />
</Route>

然后在Projects组件中，您可以使用{this.props.params.id}访问id，并根据该ID显示不同的组件。

这样的事情：

render() {
    let Margam = (this.props.params.id == "margam") ? <Margam /> : "";
    let Margam2 = (this.props.params.id == "margam2") ? <Margam2 /> : "";

    return (
        <div>
            {Margam}
            {Margam2}
        </div>
    );
}

希望这有帮助。

React.js为具有不同数据的同一组件生成动态路由

1 个答案: