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

Question

我是一个新手，无法使用react。我正在关注教程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')
);

路由.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和失败的 Prop 类型:The prop child is marked as required in基地, but its value is不明确的。我很明显这一点，因为我没有像早期版本那样提到子路线。我尝试调查这个React training link也可以找到将组件插入路由的位置。

任何帮助将不胜感激。如果这个问题已经被问过，我很抱歉，但我找不到很多关于 React Router 4 的教程或正确的文档来帮助我。

Answer 1

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