Javascript 使用React Router 4呈现嵌套组件时发生冲突

我使用React路由器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));

选择任何选项卡时呈现的两个选项卡内容组件（HardwareList或HardwareTypesList）都将包括一个链接按钮，该按钮将导航到

/hardware/add

或

/hardware/types/add

。这就是问题所在。当我导航到

/hardware/add

或

/hardware/types/add

时，我想呈现一个没有

组件的全新视图，但这是不可能的，因为路由

与

/hardware/add

或

/hardware/types/add

匹配，因为它没有

确切的
属性

这是我的
packages/hardware view/index.js
文件，其中包含
HardwareView
组件：

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>
        );
    }
}

import React，{Component}来自'React'；
从“物料界面/纸张”导入纸张；
从“物料界面/选项卡”导入{Tabs，Tab}；
从'react router dom'导入{Route，Link}；
从“../hardware list”导入硬件列表；
从“../hardware types list”导入硬件类型列表；
导出默认类HardwareView扩展组件{
render（）{
const{location}=this.props；
const{pathname}=位置；
返回(
);
}
}

我尝试过使用布局方法，但没有成功。我知道我可能想得太多了，有一个更干净的方法来解决这个问题。关于如何实现我所期望的目标，有什么建议或指南吗

TLDR；
试图在路由内呈现路由，但由于路由的路径，URL的基本路径呈现顶级组件。例如，
/foo
呈现“组件A”，
/foo/bar
呈现“组件A”并在A中包含“组件B”，但我希望
/foo/bar/baz
仅呈现“组件C”，它呈现的是“组件A”和“组件C”.
开关
呈现与位置（）


这并没有解决问题。导航到
/hardware/add
或
/hardware/types/add
时，选项卡组件仍会呈现
交换机中的路由顺序非常重要，因为
交换机将仅显示第一条匹配的路由。你试过我回复的顺序了吗？谢谢Karthik Ravichandran，你是对的，我没有考虑路线的顺序。既然订单已经确定，问题就解决了
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>
        );
    }
}

<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>