我为学校档案系统建立了一个项目，其中我使用 React 构建了前端。在管理页面的主要组件上，我希望有一个 react-router 来浏览管理对话框。当我尝试实现这一点时，出现了以下问题：当尝试通过 react 路由组件将参数传递给类时，子组件没有收到任何 props。

我有以下 react 组件层次结构：

class Test extends React.Component {
   constructor() {
       super();

       console.log("in class: " + this.props)
   }

   render() { return <div>test</div>}
}

class AdminPage extends BasicPage {
    /* Other class functions here... */
    render() {
       let pageBody = "";
       if(!this.state.isLoading)
           pageBody = (
               <Router>
                   <Switch>
                       <Route path={"/:schoolName/admin"} component={AdminMenu} exact/>
                       <Route path={"/:schoolName/admin/view/:id"} exact
                          component={() => <Test par1="abc" />} />
                   </Switch>
               </Router>
           );
       return (
           <Layout title={ this.state.isLoading ?
               TITLE_UNTIL_LOADED :
               PAGE_TITLE + this.state.schoolPrefs.heb_name}
                   subtitle={ this.state.subtitle }
                   notification={ this.state.notification }
                   isLoading={ this.state.isLoading }
           >
               {pageBody}
           </Layout>
       );
    }
}

当我转到 /Random Name/admin/view/someID 时，它会在控制台上打印 in class: undefined 。

然后我想看看问题是出在传递组件还是接收组件上。我将函数 otherTest(props) 定义如下：

function otherTest(props) {
   console.log("Function props: " + props);
   return (<Test {...props} />);
}

然后像这样更改路由组件：

<Route path={"/:schoolName/admin/view/:id"} exact
  component={otherTest} />

当我转到 /Random Name/admin/view/someID 时，我看到该函数正常接收了 props，但 <Test … /> 内的日志仍然打印 undefined 。

我也尝试在主渲染函数中的 {pageBody 变量后添加 <Test param1=”123” /> ，但它也打印了 in class: undefined 。

有人知道问题可能出在哪里吗？

谢谢。