javascript - React 路由器将特定参数传递给子组件

Question

我有一个令人困惑的问题，我无法弄清楚。我是 React + Flux + React Router 的新手。

我有以下路线:

<Router history={browserHistory} >
    <Route path="/" component={App}>
        <IndexRoute component={Search}/>
        <Route path="/login" component={Login} />
        <Route name="client" path="/client(/:clientid)" component={Client}/>
        {/* <Route name="tel" path="/tel/:telid" component={Tel}/>*/}
    </Route>
</Router>

我希望能够将特定参数传递到特定路由。我知道我可以使用以下方法将所有参数传递给所有路由:

{this.props.children && React.cloneElement(this.props.children, {...})}

但是我不想允许子组件访问其他组件状态。理想情况下，我想将 loginState 传递给登录组件，将 searchState 传递给搜索组件，将 clientState 传递给客户端组件。通过上述方法，客户端组件可以访问所有组件状态。

我目前有这个解决方法，但感觉很脏而且不太适合 future :

var React = require('react');

var AppStore = require('../stores/AppStore');

var browserHistory = require('react-router').browserHistory;

// Flux cart view
var App = React.createClass({

    getInitialState() {
        return AppStore.getState();
    },

    componentWillMount() {
        if (!this.state.auth.loggedIn) {
            browserHistory.push('/login');
        }
    },
    // Add change listeners to stores
    componentDidMount() {
        AppStore.addChangeListener(this._onChange);
    },

    // Remove change listers from stores
    componentWillUnmount() {
        AppStore.removeChangeListener(this._onChange);
    },

    // Method to setState based upon Store changes
    _onChange(){
        this.setState(AppStore.getState());
    },

  // Render cart view
  render() {
    console.log(this.props.children);
    var name = this.props.children.type.displayName;
    var p;
    switch(name) {
        case 'client':
            p = {clientState: 'test'}
        break;
        case 'login':
            p = {auth: this.state.auth}
        break;
    }
    return (
        <div>
            {this.props.children && React.cloneElement(this.props.children, p)}
        </div>
    );
  }

});

module.exports = App;

关于如何正确实现这一目标有什么想法吗？我查看了很多谷歌结果，但大多数都回到了旧版本的react和react-router。

Answer 1

您可以使用named components

...     
<Route path="/login" components={{login:Login}} />
<Route path="/client(/:clientid)" components={{client:Client}}/>
...

在应用程序组件中

class App extends Component {
    constructor(props){
        super(props);
        this.setProps= this.setProps.bind(this);
    }
    setProps(comp, props){
        if(!comp) return null;
        return React.cloneElement(comp, props);
    }
    render(){
        const {client, login}=this.props;
        const {clientData, loginData}=this.state;

        return (<div>
            {this.setProps(client,clientData)}
            {this.setProps(login,loginData)}
        </div>);
    }
}

export default App;

当页面上每条路由有多个组件时，它也很有用