反应路由器getComponent传递pathvariable

时间:2017-03-11 10:37:51

标签: javascript reactjs react-router

我的app.js:

import React from 'react';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router';
import Home from './components/home.jsx';

const loadAsync = (promise) => (location, callback) => {
promise
    .then(module => callback(null, module.default))
    .catch(e => console.warn('Could not load route component', e));
}

class App extends React.Component {
render() {
    return(
        <Router history={hashHistory}>
            <Route path="/" component={Home} />
            <Route path="/hello/:foo" getComponent={loadAsync(System.import('./components/hello.jsx'))} />
        </Router>
    )
}
}

export default App;

我的hello.jsx:

import React from 'react';

class Hello extends React.Component {

render() {
    return (<h1>Hello {this.props.matches.foo}!</h1>);
}
}

export default Hello;

home.jsx包含指向&#34; / hello / World&#34;的链接。

如何阅读&#34; foo&#34; hello.jsx中的变量? 我是否必须在loadAsync()中传递它以及如何传递?

0 个答案:

没有答案