React 路由器总是显示 NotFound 组件

Question

我有来自后端的路由对象并将其设置为这样的路由，当我设置 NotFound 组件时，该路由在 switch/case 中默认为“*”或现在评论的大小写“NotFound”，它始终显示所有组件。

我的意思是它一直有效，而不只是以错误的方式 URL

function getProperComponentData(el) {
  switch (el.label) {
    case "Home":
      return { ...el, exact: true, Component: Home };
    case "Categories":
      return { ...el, Component: Categories };
    case "Popular":
      return { ...el, Component: Popular };
    case "Movies-by-Categorie":
      return { ...el, Component: MoviesByCategory };
    case "Asset":
      return { ...el, Component: AssetDetails };
    case "Discover":
      return { ...el, Component: Discover };
    // case "NotFound":
    //   return { ...el, Component: NotFound };
    default:
      return { ...el, Component: NotFound };
  }
}

const RoutesApp = ({ routes }) => {
  if (routes) {
    const array = routes.map((el) => {
      const { id, exact, route, Component } = getProperComponentData(el);
      return (
        <Route key={id} exact={exact} path={route} component={Component} />
      );
    });

    return array;
  }

  return null;
};

我已经尝试了很多.. 甚至从后端对象中删除未找到的路由，并像这样手动将其设置为路由器

        <Router>
            <NavBar menu={this.state.menu ? this.state.menu : false} />

            <Switch>
              <RoutesApp
                routes={this.state.routes ? this.state.routes : false}
              />
              <Route path="*" component={NotFound} /> // here I set it manually but delete from routes at line above (this way it's not working at all)
            </Switch>
          </Router>

但是这种方式根本行不通

有什么想法吗？ it shows all the time

Answer 1

发生这种情况是因为 <Switch> 的所有子元素都应该是 <Route> 或 <Redirect> 元素。您可以在 react-router-dom docs.

中查看更多相关信息

因此，您的代码的一种解决方案是执行类似的操作：

 // I've just removed `RoutesApp` and rendered .map directly
 <Switch>
   {this.state.routes && this.state.routes.map((el) => {
     const { id, exact, route, Component } = getProperComponentData(el);
     return (
       <Route
         key={id}
         exact={exact}
         path={route}
         component={Component}
       />
     );
   })}
   <Route path="*" component={NotFound} />
 </Switch>

React 路由器总是显示 NotFound 组件

React router always showing NotFound component

javascript

router

reactjs

react-router

react-router-dom