具有多個孩子的反應路由器路線

我的一條路線需要兩個孩子來完成我想要做的工作。具有多個孩子的反應路由器路線

主要的應用程序頁面，在這裏我定義所有的路線可能會是這個樣子：

<Route path="/logs" component={Logs}> 
     <Route path="/logs/archive(/**)" component={ArchiveAction}></Route> 
     <Route path="/logs/view(/**)" component={LogApp}></Route> 
    </Route>

至於日誌組件，如果我在/日誌/查看/無論走哪條路線，它會呈現稱爲LogApp的組件將成爲整個頁面。

如果它在/ logs/archive /無論日誌的子組件是什麼改變。但這部分工作正常。我無法工作的是/ logs/view/whatever。這是我目前的日誌組件：

export class Logs extends Component{ 

    render(){ 
     var initialLogsPage =(<Grid> 
       <Row> 

        <Col lg={4} md={4} sm={4}> 
         <Directories/> 
        </Col> 
        <Col lg={4} md={4} sm={4}> 
         <Archives children={this.props.children}/> 
        </Col> 

       </Row> 
      </Grid>); 
     return(
      <div> 
      {initialLogsPage || this.props.children} 
      </div> 
     ); 
    } 
}

我知道我使用this.props.children可能是問題所在，因爲我正在處理兩個問題。有什麼辦法可以解決這個問題嗎？

來源

2016-11-11 theJuls

這將始終顯示'initalLogsPage'渲染。 –

我知道。我能做些什麼來顯示LogApp組件？ – theJuls

我真的不知道有足夠的React來幫助，但是您可以嘗試交換這些變量嗎？ '{this.props.children || initialLogsPage}' –

只要改變你的路線：

<Route path="/logs" component={Logs}> 
    <Route path="/logs/archive(/**)" component={ArchiveAction}></Route> 
</Route> 
<Route path="/logs/view(/**)" component={LogApp}></Route>

來源

2016-11-11 20:22:19

這就是我現在的樣子。不幸的是我理想的情況是需要第二個孩子路線在/日誌中，以保持導航欄上的一致性從主應用程序組件 – theJuls

我唯一能想到的另一種方法就是檢查路由本身，我相信你可以從'this.state.location.pathname'訪問它，然後你可以檢查路由是否從/ logs/view'呈現'{this.props.children}'，否則呈現'initialLogsPage' –

您可以使用Route•不用路徑：

// Route config 
<Route path="/logs" component={Logs}> 
    <Route component={Archives}> 
    <Route path="/logs/archive(/**)" component={ArchiveAction}></Route> 
    </Route> 
    <Route path="/logs/view(/**)" component={LogApp}></Route> 
</Route> 

// components 
const Archives = ({ children }) => (
    <Grid> 
    <Row> 
     <Col lg={4} md={4} sm={4}> 
     <Directories/> 
     </Col> 
     <Col lg={4} md={4} sm={4}> 
     <Archives>{children}</Archives> 
     </Col> 
    </Row> 
    </Grid> 
); 

const Logs = ({ children }) => <div>{children}</div>; // add shared layout here

你也應該想想應該/logs呈現。請將Logs更改爲檢查props.children，例如<div>{children || <LogIndexComponent />}</div>或在您的路由配置中包含IndexRoute。

來源

2016-11-12 10:06:33

具有多個孩子的反應路由器路線

回答

相關問題