Javascript 反应路由器路径呈现多个组件
我定义了以下路线:Javascript 反应路由器路径呈现多个组件,javascript,reactjs,react-router-v4,Javascript,Reactjs,React Router V4,我定义了以下路线: <Route exact path="/dashboard/main" render={() => <Dashboard toggleModal={this.toggleModal} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu} />} /> <Route exact path="/dashboard/channels/:id/:channelName/collab
<Route exact path="/dashboard/main" render={() => <Dashboard toggleModal={this.toggleModal} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu} />} />
<Route exact path="/dashboard/channels/:id/:channelName/collaborators" render={(props) => <Collaborators {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route exact path="/dashboard/channels/:id/:channelName/:type" render={(props) => <VideoStats {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/edit_video" render={(props) => <EditVideo {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/account" render={(props) => <Account {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/> } />
<Route path="/dashboard/socialMedia" render={(props) => <SocialMedia {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/media-library" render={(props) => <MediaLibrary {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/shares" render={(props) => <Shares {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
然后
和
组件都呈现。
我已经尝试了所有可能的方法来移除和添加精确的道具。就像一次只给一个人,然后从所有人身上移除一样。什么都不管用。
如何避免
组件为上面提到的第二个路径渲染。您可以使用另一个组件和渲染条件库来获得
const AnotheCompoent = (props) => <div>
{ props.match.params.type == 'collaborators' ?
<Collaborators {...props}/> :
<VideoStats {...props}/> }
</div>;
<Route exact path="/dashboard/channels/:id/:channelName/:type" render={(props) => <AnotheCompoent {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
const-anothecomponent=(道具)=>
{props.match.params.type=='collaborators'?
:
}
;
} />
添加一个开关
。
它将仅呈现与路径匹配的第一条路由
<Route exact path="/dashboard/main" render={() => <Dashboard toggleModal={this.toggleModal} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu} />} />
<Switch>
<Route path="/dashboard/channels/:id/:channelName/collaborators" render={(props) => <Collaborators {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/channels/:id/:channelName/:type" render={(props) => <VideoStats {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
</Switch>
<Route path="/dashboard/edit_video" render={(props) => <EditVideo {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/account" render={(props) => <Account {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/> } />
<Route path="/dashboard/socialMedia" render={(props) => <SocialMedia {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/media-library" render={(props) => <MediaLibrary {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/shares" render={(props) => <Shares {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
}/>
} />
} />
} />
将它们放在开关中
如果我将第2行与第3行交换是否重要?协作者不应该是:类型参数。它是硬编码的,所以它是完全不同的路径。当您调用时,您可以检查它是否工作。你能解释一下“仅路径”是什么意思吗。我不熟悉react and react router,我很难理解路由。您为路由提供的路径
属性。在其正常行为中,路由器将呈现其路径与当前URL匹配的所有路由。但是,当您使用开关时,它将仅呈现路径与URL匹配的第一条路由。
<Route exact path="/dashboard/main" render={() => <Dashboard toggleModal={this.toggleModal} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu} />} />
<Switch>
<Route path="/dashboard/channels/:id/:channelName/collaborators" render={(props) => <Collaborators {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/channels/:id/:channelName/:type" render={(props) => <VideoStats {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
</Switch>
<Route path="/dashboard/edit_video" render={(props) => <EditVideo {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/account" render={(props) => <Account {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/> } />
<Route path="/dashboard/socialMedia" render={(props) => <SocialMedia {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/media-library" render={(props) => <MediaLibrary {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />
<Route path="/dashboard/shares" render={(props) => <Shares {...props} saveMatchForSidebarMenu={this.saveMatchForSidebarMenu}/>} />