Question

我的路由使用React Router 4时出现问题。使用＆＃34;嵌套＆＃34;路线，顶部路线之一呈现与路线匹配的组件，但我不希望它被渲染。我将把重要的代码放在这里，并解释我想要实现的目标。这是我的主要/顶级路由，我删除了与问题无关的一些代码行：

这是我的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文件，其中包含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>
        );
    }
}

我尝试使用Layouts方法described here，但没有运气。我知道我可能会过度思考这一点，并且有更清洁的方法。关于如何实现我所寻找的目标的任何建议或指导？

TLDR ; 尝试在路径中渲染路径，但由于路径的路径，URL的基本路径呈现顶级组件。例如，/foo呈现＆＃34;组件A＆＃34;，/foo/bar呈现＆＃34;组件A＆＃34;并且有＆＃34;组件B＆＃34;在A中，但是我希望/foo/bar/baz只能呈现＆＃34;组件C＆＃34;它的渲染＆＃34;组件A＆＃34;和＆＃34;组件C＆＃34;。

Answer 1

Switch呈现与该位置匹配的第一个孩子<Route>或<Redirect>（source: docs）

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

使用React Router 4

1 个答案: