Question

我有一个包含另外3个应用程序的应用程序，

我正在尝试从嵌套应用程序链接到专门属于该应用程序的其他组件，但是我有一些奇怪的行为，列表会加载，而EmailDetails组件不会加载。

URL本身也发生了变化，但我只得到一个空白页

我也在控制台中得到了这个

React无法识别DOM元素上的computedMatch属性。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写computedmatch

主应用程序路由：

export class App extends React.Component {
  render() {
    return (
      <Router>
            <NavBar ></NavBar>
        <Switch>
          <div className="wrapper">
            <Route exact  path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route exact component={Overview} path="/app" />
            <Route exact component={EmailApp} path="/email" />
            <Route exact component={ToDoApp} path="/todo" />
            <Route exact component={BookApp} path="/book" />
            <footer>Footer</footer>
          </div>
        </Switch>
      </Router>
    );
  }
}

嵌套的电子邮件应用程序路由：

  render() {
    const {emails}=this.state
    const location=this.props.location.pathname
    const emailList=  (location==='/email')? <EmailList emails={emails}></EmailList>:''
    return (

      <div className="email-wrapper">
        <Filter onSetFilter={ this.onSetFilter } placeHolder='Search By Sender,subject,Id'></Filter>
       {emailList}
        <Router>
          <Switch>
        <Route  exact component={EmailDetails}  path="/email/:emailId/" />
        </Switch>
        </Router>
      </div>

    );
  }
}

链接来自其他组件，看起来像这样：

<Link  to={`/email/${email.id}`}>

反应路由问题，URL更新，但comonent不渲染，嵌套路由

0 个答案: