Question

我一直在使用CoreUI来深入了解React。在名为“容器”的文件夹中，这段代码似乎遍历包含所有路由的文件。

<main className="main">
            <AppBreadcrumb appRoutes={routes}/>
            <Container fluid>
              <Switch>
              {routes.map((route, idx) => {
                  return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
                      <route.component {...props} />
                    )} />)
                    : (null);
                },
              )}
                <Redirect from="/" to="/dashboard" />
              </Switch>
            </Container>
          </main>

这是routes.js文件的简短示例：

    const routes = [
  { path: '/', exact: true, name: 'Home', component: DefaultLayout },
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
  { path: '/theme', exact: true, name: 'Theme', component: Colors },

根据我的理解，代码正在尝试检查路径，仅根据浏览器的路径呈现组件，这是否正确？您可以在普通的IF-Else范例中解码以上代码吗？

Answer 1

您可以在普通的IF-Else范式中解码以上代码吗？

要回答您的问题，您必须了解三元或条件运算符是什么。简而言之，它通过验证一个条件（在问号之前）来代替if / else语句，如果为true，它将执行询问标记旁边的任何操作，如果为false，则它将执行冒号旁边的所有操作。所以：

condition ? do if true : do if false.

检查here以获得更精确的定义。

普通版

return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
                  <route.component {...props} />
                )} />)
                : (null);

if / else版本

if (route.component){
    return (
        <Route key={idx} 
            path={route.path} 
            exact={route.exact} 
            name={route.name} 
            render={props => (<route.component {...props} />)} 
        />);
} else {
    return null;
}

所以，对于您的问题：

根据我的理解，代码正在尝试检查路径，并且仅根据浏览器的路径渲染组件

仅当在名为component的数组内的对象中设置routes时，它才会渲染Route组件。如果未在对象中设置该属性，它将不会呈现任何内容（在React中，您可以通过返回null来实现）。

Route组件将根据浏览器的路径来处理组件的呈现，并将其与path中项目的routes属性（“ /”，“ / dashboard”或“ / themes”。

ReactJS动态路由

1 个答案: