javascript - React-router hashHistory 推送仅更改 URL

Question

我无法让我的 react 应用程序加载子路由的组件。当我执行 this.context.router.push('/url') 时，URL 发生变化，但指定为该路由加载的组件未加载。我有这个在另一个组件中工作，但这个不起作用。我能看到的唯一不同之处是，不起作用的路由在路由树中比起作用的路由深 1 层。
我已经查看了 SO 上的所有地方以及 react 路由器文档和各种教程，看看是否能找到任何可以给我线索的东西，但结果都是空的。这是相关代码。

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
}

销售.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 path 是 authorize-card 的子路由，所以<SaleSelectInvoices>组件呈现为 <Sale> 的子组件成分。这意味着您需要包含 this.props.children在你的<Sale>组件的渲染方法。

如果您不想这样做，但您想要 select-invoices成为authorize-card的 child 的路线，您可以声明<Sale>作为<IndexRoute>并为两者使用支架组件..

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

<SaleHolder>只会返回它的 child 属性。

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