代码之家 › 专栏 › 技术社区 › Marzieh Mousavi

如何在使用react路由器的路由中使用阵列

react-router regex reactjs arrays javascript

Marzieh Mousavi · 技术社区 · 3 年前

function App() {
  return (
    <Router>
      <Header />
      <Container >
        <Switch>

          <Route exact path='/' component={Home}  />

          <Route path='/categories/(cat1|cat2|cat3|cat4|cat5|cat6)' component={itemList} />

          <Route path="*" component={notFound} />

        </Switch>
      </Container>
      <Footer />
    </Router>
  );
}

const itemCategories = ['cat1','cat2','cat3','cat4','cat5','cat6'];

项目列表 路由

path='/categories/(cat1|cat2|cat3|cat4|cat5|cat6)'

2 回复 | 直到 3 年前

Drew Reese 3 年前

如果我理解您的问题,您希望渲染处理多个类别的路由。

任何类别值。

<Route path='/categories/:category' component={itemList} />

使用路径数组渲染单个管线。这允许您处理特定允许的类别。这导致 path={["/categories/cat1", "/categories/cat2", ... , "/categories/cat6"]} .
```
<Route
  path={itemCategories.map(cat => `/categories/${cat}`)}
  component={itemList}
/>
```

path='/categories/(cat1|cat2|cat3|cat4|cat5|cat6)' 正如你所寻找的。

<Route
  path={`/categories/(${itemCategories.map((cat) => cat).join("|")})`}
  component={ItemList}
/>

为每个类别渲染一条管线。这允许您处理特定允许的类别,但基本上与 Route 组成部分。

{
  itemCategories.map(cat => (
    <Route key={cat} path={`/categories/${cat}`} component={itemList} />
  ))
}

类似类别/cat7未找到页面将出现。

Nitsan Cohen 3 年前

可以使用:将其设置为动态路由,如下所示:

<Route path="/categories/:cat" component={itemList} />

然后根据用户的选择渲染路由

 {itemCategories.map(route => {
             return <Route path=`/categories/${route}}` component={itemList}/>
           }}

推荐文章

Toniq · javascript为php保存多维数组

1 年前

Jannis · Java中数组的怪异行为

1 年前

callum · 如何识别数组中与给定序列不匹配的元素?

1 年前

Gamerboi677 _YT · 如果玩家触摸了某个部分,如何将玩家名称添加到数组中。-Roblox-Lua编码

1 年前

at. · 在一行中创建任意大小的JavaScript/TypeScript 2d数组

1 年前

Rakis Friski · Javascript Spread运算符混淆行为

1 年前

tenfour · 如何使用数组元素的索引初始化数组元素

2 年前

Guillaume · 使用操作从Python列表创建numpy数组

2 年前

maxMas · Swift 5:为什么会出现索引超出范围错误?

2 年前

Sarah Workman · 尝试比较用javascript编程添加的字符串的值

2 年前