Question

我无法让我的反应应用程序加载子路径的组件。当我执行this.context.router.push（'/ url'）时，URL会更改，但是未加载为该路由加载的组件。我有这个工作在另一个组件，但这一个不起作用。我能看到的唯一不同的是，不起作用的那个在路线树中比工作的那个更深一层。
我已经遍布SO以及react-router文档和各种教程，看看我是否能找到任何可以给我一些线索但却空洞的东西。这是相关的代码。

client.js - （适用于大多数人的app.js）

<Router history={hashHistory}>
    <Route path="/" component={Layout}>
        <IndexRoute component={Dashboard}></IndexRoute>
        <Route path="Login" component={Login}></Route>
        <Route path="accounting">
            <Route path="authorize-orders" component={AuthorizeOrders}></Route>
            <Route path="authorize-card" component={Sale}>
                <Route path="select-invoices" component={SaleSelectInvoices}></Route>
            </Route>
        </Route>
    </Route>
</Router>

SaleSelectInvoices.js

    class SaleSelectInvoices extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bearer: AppStore.getBearer(),
            customerInvoices: null
        }
    }
    render() {
        if (!this.state.customerInvoices) {
            return (<div>Loading...</div>);
        }
        return (
            <div>
                <h1>Authorize Credit Card Payment</h1>
                <h2>Select Invoices</h2>
                <div class="row">
                    <div class="col-md-1">Select</div>
                    <div class="col-md-3">Invoice #</div>
                    <div class="col-md-4">Amount</div>
                    <div class="col-md-4">Charge Amount</div>
                </div>

            </div>

        );
    }
}
export default SaleSelectInvoices;

在点击事件处理函数中，我执行以下操作。

this.context.router.push('/accounting/authorize-card/select-invoices');

我做了上下文参考...

Sale.contextTypes = {
    router: React.PropTypes.object.isRequired
}

Sale.js

render() {
    var opts = {};
    if (!this.state.formIsValid) {
        opts['disabled'] = 'disabled';
    }
    return (
        <div>
            <h1>Authorize Credit Card Payment</h1>

            <h2>Select Customer</h2>            
            <form>
                <input ref="customerNumber" name="customer" 
                onChange={this.handleCustomerInputChange} 
                onBlur={this.validateCustomerNumber} 
                min="86" max="999999" type="numeric" class="customerNumber" />                        
                <button {...opts} onClick={this.handleCustomerSelect}>Next</button>
            </form>
        </div>
    );
}

所以，就像我在开头说的那样，URL会更改为正确的路径，但页面不会呈现SaleSelectInvoices组件..我仍然会看到Sale组件。浏览器控制台也没有列出任何错误。

Answer 1

select-invoices路径是authorize-card的子路由，因此<SaleSelectInvoices>组件将呈现为<Sale>组件的子组件。这意味着您需要在this.props.children组件的渲染方法中加入<Sale>。

如果您不想这样做，但希望select-invoices路由成为authorize-card的孩子，则可以将<Sale>声明为<IndexRoute>并使用这两个人的持有人组成..

<Route path="authorize-card" component={SaleHolder}>
  <IndexRoute component={Sale} />
  <Route path="select-invoices" component={SaleSelectInvoices}></Route>
</Route>

<SaleHolder>只会返回其子道具。

const SaleHolder = (props) => {
  return props.children;
}

react-router hashHistory push仅更改URL

1 个答案: