Question

我的div文件中有三个index.html为

<div id="header"></div>
<div id="crm"></div>
<div id="footer"></div>

现在我在标题中有rendered标题内容，我的主要内容是crm和页脚内容，如下所示：

ReactDOM.render(
   <HF.Header />,
   document.getElementById("header")
);

ReactDOM.render(
   routes,
   document.getElementById("crm")
);

ReactDOM.render(
   <HF.Footer /> ,
   document.getElementById("footer")
);

我这样做是因为我不必单独在每页上import页眉和页脚。

我已在我的内容中定义了我的路线

var routes = (
  <Router history={browserHistory}>
    <Route path="/" component={LoginBox}/>
    <Route path="/dashboard" component={DashBoard} />
    <Route path="/product" component={ProductLanding}/>
    <Route path="/salesfunnel" component={Salesfunnel}/>
    <Route path="/addmeeting" component={AddMeeting}/>
    <Route path="/pitchProduct" component={PitchProduct}/>
    <Route path="/mysubs" component={MySubs}/>
    <Route path="/updateproduct" component={UpdateProduct}/>
    <Route path="/transactionform" component={AddTransaction}/>
    <Route path="/sellerLanding" component={SellerLanding}/>
    <Route path="/addSeller" component={AddSeller}/>
  </Router>
)

现在我的一些页面如仪表板，会议都在标题中，当我想从标题打开该页面时，它给了我这个错误：

在路由器上下文之外呈现的链接无法导航。

请帮我做什么任何帮助非常感谢。

Answer 1

不使用3个div's和rendering不同的组件，而是使用包含所有部件标题的主页，某些路径页面和页脚，如下所示：

export default HomePage extends React.Component{
    render(){
       return(
           <div>
               <Header/>
               {this.props.children}
               <Footer/>
           </div>
       )
    }
}

将此HomePage作为主要路线，并将LoginBox作为默认路线：

 var routes = (
    <Router history={browserHistory}>
        <Route path="/" component={HomePage}>
            <IndexRoute component={LoginBox}/>
            <Route path="/dashboard" component={DashBoard} />
            <Route path="/product" component={ProductLanding}/>
            <Route path="/salesfunnel" component={Salesfunnel}/>
            <Route path="/addmeeting" component={AddMeeting}/>
            <Route path="/pitchProduct" component={PitchProduct}/>
            <Route path="/mysubs" component={MySubs}/>
            <Route path="/updateproduct" component={UpdateProduct}/>
            <Route path="/transactionform" component={AddTransaction}/>
            <Route path="/sellerLanding" component={SellerLanding}/>
            <Route path="/addSeller" component={AddSeller}/>
        </Route>
    </Router>
)

ReactDOM.render(
  routes,
  document.getElementById("crm")
);

如果您以这种方式编写，则无需使用ReactDOM.render三次，无需在所有页面上导入页眉和页脚组件，并且它将出现在每个页面上，因为每个页面都将在{{1}内呈现1}}。这将使您的应用结构更加清晰，如果您想在每个页面上添加更多信息，您可以轻松地将其放入HomePage。

在路由器上下文之外呈现的<link />无法导航

1 个答案: