如果子路由附加了组件，如何使用 BrowserRouter？答案

【问题标题】：How to use BrowserRouter if child routes has components attached?如果子路由附加了组件，如何使用 BrowserRouter？
【发布时间】：2017-07-20 15:29:56
【问题描述】：

我是一个反应新手。我正在按照教程React Tutorial 创建一个注册表单。但后来它已经过时了。我正在尝试使用浏览器重定向单击链接时重定向到注册、登录和主页。本教程定义了路线，如

const routes = {
  component: Base,
  childRoutes: [

    {
      path: '/',
      component: HomePage
    },

    {
      path: '/login',
      component: LoginPage
    },

    {
      path: '/signup',
      component: SignUpPage
    }

  ]
};

基础组件定义了带有链接的导航栏。然后将此路由导入索引页面并与根据 React Router v4 过时的浏览器历史记录一起使用。我想使用浏览器路由器，但我无法弄清楚如何为子路由提供附加组件。

我尝试了以下

索引.jsx

import { BrowserRouter as Router,Route } from 'react-router-dom';

ReactDOM.render((
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Router>{routes}</Router>
  </MuiThemeProvider>), 
        document.getElementById('root')
);

Routes.jsx

const routes = <Route component = {Base}>
    <Switch>
        <Route path="/" component={HomePage}/>
        <Route path ="/login" component = {LoginPage}/>
        <Route path ="/signup" component = {SignUpPage}/>
    </Switch>    
</Route>;

但我从一开始就知道这行不通，正如预期的那样，它抛出了一个错误。 You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored 和失败的道具类型：The propchildrenis marked as required inBase, but its value isundefined。这一点我很明显，因为我没有像早期版本那样提到任何关于子路由的地方。我也尝试查看此React training link，但可以找到将组件插入路由的位置。

任何帮助将不胜感激。如果这个问题已经被问过，我很抱歉，但我找不到很多关于 react 路由器 4 的教程或适当的文档来帮助我。

【问题讨论】：

我不明白你的问题。您正在渲染没有子级的 Base，并且在 RRv4 中您不应该有嵌套路由。
你想动态生成路由吗
感谢您的回复。 @Melounek 答案就是我想要的

标签： javascript reactjs react-router

【解决方案1】：

我认为你应该删除 <Route component = {Base}> 并改用 <Base>

【讨论】：