Question

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

之类的路线

const routes = {
  component: Base,
  childRoutes: [

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

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

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

  ]
};

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

我尝试了以下

Index.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 prop子is marked as required in基础, but its value is未定义。我很明显，因为我没有提到像早期版本那样的子路线。我也试着查看这个React training link，但是可以找到将路径插入路径的位置。

任何帮助都将不胜感激。很抱歉，如果这个问题已被提出，但我找不到很多关于反应路由器4的教程或适当的文档，这对我有帮助。

Answer 1

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

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

1 个答案: