javascript - 使用React Router 4渲染嵌套组件时发生冲突

我在使用React Router 4进行路由时遇到问题。使用“嵌套”路由时，最上面的路由之一会呈现与该路由匹配的组件，但我不希望它被呈现。我将把重要的代码放在这里，并解释我要实现的目标。这是我的主/顶层路由，我删除了一些与该问题无关的代码行：这是我的App.js文件：import React, {Component} from 'react';import {Route} from 'react-router-dom';import {withRouter} from 'react-router';import {connect} from 'react-redux';import {mapStateToProps, mapDispatchToProps} from './selector';import HomeView from './packages/home-view';import HardwareView from './packages/hardware-view';import HardwareAddView from './packages/hardware-add-view';import HardwareTypesAddView from './packages/hardware-types-add-view';class App extends Component { render() { return ( <div className="App"> <main> <Route exact path="/" component={HomeView} /> <Route path="/hardware" component={HardwareView} /> <Route exact path="/hardware/add" component={HardwareAddView} /> <Route exact path="/hardware/types/add" component={HardwareTypesAddView} /> </main> </div> ); }}export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));HomeView组件目前仅呈现一个空的<div/>。现在，让我们进入HardwareView组件。在此组件内部，我从material-ui渲染了一个<Tabs/>组件。此<Tabs/>组件将具有2个选项卡，并且每个选项卡均具有其自己的组件作为内容。因此，为了说明这一点，可以这样看：App.js (div.App -> main)+--------------------------------------------------------------------------+| || hardware-view.js (Tabs component) || +---------------------------------------------------------------+ || | Hardware | Hardware Types | || | (Link to="/hardware") | (Link to="/hardware/types") | || +---------------------------------------------------------------+ || | Tab Content: | || | | || | A table that is served only when the exact path is "/hardware"| || | if the Hardware tab is selected. Or the content from | || | "/hardware/types" if the Hardware Types tab is selected | || | | || | - HardwareList for "/hardware" | || | - HardwareTypesList for "/hardware/types" | || +---------------------------------------------------------------+ |+--------------------------------------------------------------------------+选择任何选项卡时都会呈现的两个选项卡内容组件（HardwareList或HardwareTypesList）都将包含一个链接按钮，该按钮将导航到/hardware/add或/hardware/types/add。这是出现问题的地方。当我导航到/hardware/add或/hardware/types/add时，我想渲染一个没有<Tabs/>组件的完整新视图，但是由于路由<Route path="/hardware" component={HardwareView} />匹配或/hardware/add，因为它没有/hardware/types/add属性。这是我的exact文件，其中包含packages/hardware-view/index.js组件：import React, {Component} from 'react';import Paper from 'material-ui/Paper';import {Tabs, Tab} from 'material-ui/Tabs';import {Route, Link} from 'react-router-dom';import HardwareList from '../hardware-list';import HardwareTypesList from '../hardware-types-list';export default class HardwareView extends Component { render() { const {location} = this.props; const {pathname} = location; return ( <div className="hardware-view-component"> <Paper zDepth={2}> <Tabs value={pathname}> <Tab label="Hardware" containerElement={<Link to="/hardware" />} value="/hardware"> <div className="tab-content"> <Route exact path="/hardware" component={HardwareList} /> </div> </Tab> <Tab label="Hardware Types" containerElement={<Link to="/hardware/types" />} value="/hardware/types"> <div className="tab-content"> <Route exact path="/hardware/types" component={HardwareTypesList} /> </div> </Tab> </Tabs> </Paper> </div> ); }}我曾尝试将Layouts方法用作described here，但没有运气。我知道我可能对此考虑过多，并且对此有更清洁的方法。关于如何实现我所寻找的任何建议或指南？TLDR；尝试在路径内渲染路径，但是由于路径的路径，URL的基本路径正在渲染顶层组件。例如，HardwareView呈现“ Component A”，/foo呈现“ Component A”，并且在A内具有“ Component B”，但我希望/foo/bar仅呈现“ Component C”，并且呈现“ Component A”和“组件C”。 (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 Switch呈现与位置（source: docs）匹配的第一个子<Route>或<Redirect><Switch> <Route exact path="/" component={HomeView} /> <Route exact path="/hardware/add" component={HardwareAddView} /> <Route exact path="/hardware/types/add" component={HardwareTypesAddView} /> <Route path="/hardware" component={HardwareView} /></Switch> (adsbygoogle = window.adsbygoogle || []).push({});