Reactjs 如何在React路由器v4中嵌套路由？

有没有办法在React路由器v4中嵌套路由

这项工作：

  <Router basename='/app'>
    <main>
      <Route path='/' component={AppBar} />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

这并不是：

  <Router basename='/app'>
    <Route path='/' component={AppBar}>
      <Route path='/customers' component={Customers} />
    </Route>
  </Router>

客户组件：

import React, { Component, PropTypes } from 'react'
import styled from 'styled-components'

export default class Customers extends Component {
  render () {
    return (
      <Container>
        <h1>Customers</h1>
      </Container>
    )
  }
}

const Container = styled.section`
  height: 100%;
  padding: 15px;
  overflow: auto;
`

import React，{Component，PropTypes}来自“React”
从“样式化组件”导入样式化
导出默认类扩展组件{
渲染（）{
返回(
客户
)
}
}
const Container=styled.section`
身高：100%；
填充：15px；
溢出：自动；
`

您的AppBar组件负责呈现客户。要调用客户，必须呈现AppBar的子级。任何直接嵌套在AppBar下的对象都是AppBar的子对象

import React from 'react';

const AppBar = ({ children }) => (
  <div>
    <header>
       <h1> stuff </h1>
    </header>
    {children}
  </div>
);

export default AppBar

从“React”导入React；
常量AppBar=（{children}）=>(
东西
{儿童}
);
导出默认应用程序栏

---

请注意，当您访问“/”时，只有AppBar会呈现。AppBar和Customers将在您访问“/Customers”时呈现。

我迄今为止找到的最佳模式

// main app
<div>
    // not setting a path prop, makes this always render
    <Route component={AppShell}/>
    <Switch>
        <Route exact path="/" component={Login}/>
        <Route path="/dashboard" component={AsyncDashboard(userAgent)}/>
        <Route component={NoMatch}/>
    </Switch>
</div>

---

我从文档中改编了这个，到目前为止似乎很有效。可能遗漏了一些明显的东西，是的，这不是v4方式，但我们需要在一个地方定义所有路由

function RouteNest(props){ return (
  <Route exact={props.exact} path={props.path} render={ p => <props.component {...p} children={props.children}/> } />
)}

export const MainRoutes = props => 

<div className='content layout'>

  <Route exact path="/" component={Landing}/>
  <Route  path={'/contact'} component={Contact}/>

  <RouteNest  path={'/thing'} component={CompoWithSub}>
    <RouteNest  path={'/thing/suba'} component={SubComponentA}/>
    <RouteNest  path={'/thing/subb'} component={SubComponentB}/>
  </RouteNest>


</div>

export const CompoWithSub = props => <div>{props.children)</div>

函数routenset（props）{return(
} />
)}
导出常量主路线=道具=>
export const componethsub=props=>{props.children）

如果有人想要嵌套路由而不键入包装路由的前缀，我在TSX中创建了如下内容：

进口：

import * as React from 'react';
import { Route, RouteComponentProps, RouteProps, Switch } from 'react-router-dom';
import Index from 'views/index';
import Login from 'views/login';
import NoMatch from 'views/no-match';

接口：

interface INestedRoutes {
    nested?: string;
}

interface INestedRoute extends RouteProps, INestedRoutes {}

NestedRoute和NestedRoutes包装器：

class NestedRoutes extends React.Component<INestedRoutes> {
    public render() {
        const childrenWithProps = React.Children.map(this.props.children, (child) => {
            return React.cloneElement(
                child as React.ReactElement<any>, { nested: this.props.nested },
            );
        })
        return childrenWithProps;
    }
}


const NestedRoute: React.SFC<INestedRoute> = (props: INestedRoute) => {
    return <Route path={`${props.nested}${props.path}`} component={props.component} />;
};

类NestedRoutes扩展React.Component{
公共渲染（）{
const childrenWithProps=React.Children.map（this.props.Children，（child）=>{
返回。克隆元素(
子级为React.ReactElement，{nested:this.props.nested}，
);
})
用道具归还儿童；
}
}
常量NestedRoute:React.SFC=（道具：IneStedroote）=>{
返回；
};

和带包装的路由：

const MultiLanguage: React.SFC<RouteComponentProps<any>> = (props: RouteComponentProps<any>) => {
    return (
        <NestedRoutes nested={props.match.path} >
            <NestedRoute path="/test" component={Login} />
            <NestedRoute path="/no-match" component={NoMatch} />
        </NestedRoutes>
    );
};


export default (
    <Switch>
        <Route path="/:language" component={MultiLanguage}/>
        <Route exact={true} path="/" component={Index} />
        <Route path="/login" component={Login} />
        <Route component={NoMatch} />
    </Switch>
);

const多语言：React.SFC=（props:RouteComponentProps）=>{
返回(
);
};
导出默认值(
);

对于嵌套路由，我使用了一种非常简单的方法

例如，主路由器就是这样的

<Router history={history}>
  <Switch >
    <Route path="/" component={Home}></Route>
  </Switch>
</Router>

使用嵌套布线的内部主元件应类似于：

<div className="App">
  <Navbar title="Home" links = { NavbarLinks }/>
  {this.renderContentPage()}
</div>

{this.renderContentPage（）}

renderContentPage将检查URL并呈现嵌套路由

<Route exact path="/" component={Page1}></Route>
<Route exact path="/page1" component={Page1}></Route>
<Route exact path='/page2' component={Page2} />

---

因此，在主组件page1和page2内部呈现组件。

路由需要一个子组件，即组件。 这不应该是一条新路线。 您可以做的是在customers组件中包含嵌套路由

---

另外，请确保删除“客户中的路线”组件中的确切路径。

@ExperimentsWithCode，我主要是想看看是否有办法避免使用包装器（即

）因为

只能有一个孩子。您是否遇到了错误，因为我完全执行了您的“不”命令，它工作正常。在第二个示例中，

客户
组件不渲染。您可以发布您的客户组件吗？@ExperimentsWithCode，post。即使渲染
的
{children}
，
组件嵌套在React Router v4中时不会呈现。您位于url“/customers”是的。
/app/customers
。如果没有嵌套，
组件确实会在该URL上呈现。该死的。我以为我在v4上，但我在v3上。很抱歉。不确定这两个版本之间有什么变化。文档中对嵌套路由的唯一引用是：但我不明白如何使用它来构建嵌套路由。我这样做了，但使用主父布局，该布局运行正常，没有错误，但仅在中显示第一条管线（在组件中），当我点击一个链接时，没有页面更改，我也在使用webpack，并像你说的那样放置output.publicPath。有没有其他问题的想法？如果没有问题，我只是用最短路径开始了第一条路径，这样就把最短路径作为唯一可用的路径。没有设置路径道具解决了我遇到的问题。谢谢！
<Route exact path="/" component={Page1}></Route>
<Route exact path="/page1" component={Page1}></Route>
<Route exact path='/page2' component={Page2} />