到达路由器无法读取 null 的属性“应用”

Question

我的代码结构是这样的

App.js

<Router>
 <Dashboard path="/appName/dashboard" />
 <Workflow path="/appName">
  <Details path="item/details" />
  <Cases path="cases/open" />
  <Cases path="cases/closed" />
 </Workflow>
</Router>

在我的仪表板组件中，我有组件，如下所示：

<Link to={`/appName/item/details?id=${id}`} ><button>{id}</button></Link>

而我的 Workflow.js 是这样的：

Workflow = ({ children }) => {
 return (
  <div>
    <main>{children}</main>
    <aside><AsideMenu /></aside>
  </div>
 )
}

但是，当我单击从仪表板转到详细信息组件的链接时，我导航到它，然后收到错误 无法读取 null 的属性“应用”

我将链接切换到 /appName/cases/open?id=${id} 仍然遇到同样的错误。

当我直接加载这些页面时，我没有遇到问题。

任何帮助将不胜感激。

Answer 1

我相信您以错误的方式使用路由器。一个有效的 React Router 表示可以如下所示：

路由器组件

<Router>
  <Switch>
     <Route path="/appName/dashboard"><Dashboard /></Route>
     <Route path="/appName">
       <Workflow />
     </Route>
  </Switch>
</Router>

工作流组件：

 <Switch>
   <Route path="/item/details"><Details /></Route>
   <Route path="/cases/open"><OpenCases /></Route>
   <Route path="/cases/closed><ClosedCases /></Route>
 </Switch>