如何在 ReactJS 中使用 Map 动态创建路由？

Question

常量文件下面的示例。我在包含我的组件的子属性中添加了一列。 我不知道这是否可以，我正在尝试使用地图将其传递给我的 Route 元素，以便我可以动态地填充 Route。

navLink.js

export const navLinks = [
  {
    id: "manage",
    title: "Manage",
    children: [
        {
            id: 'manage/DevMaintenance',
            title: 'Device Attribute Maintenance',
            component: '<DeviceAttributeMaintenance/>'
        },
        {
            id: 'manage/WaferPieceData',
            title: 'Wafer Piece Data',
            component: '<WaferPieceData/>'
        }
    ]
}
];

手动导入那些组件。

我像这样使用它们，但它不起作用。

import React from 'react'
import {Navbar, Nav, Container, NavDropdown} from 'react-bootstrap';
import { navLinks } from '../constants/index.js';
import {
    Route,
    Routes,
    Link,
    BrowserRouter,
} from "react-router-dom";

import { DeviceAttributeMaintenance } from '../pages/DeviceAttributeMaintenance.jsx';
import { WaferPieceData } from '../pages/WaferPieceData.jsx';

export const Navigation = () => {
    return (
        <BrowserRouter>
            <Navbar bg="dark" variant="dark" expand="lg">
                <Container>
                    <Navbar.Brand href="#home">Sample</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="ms-auto">
                            {navLinks.map((nav, index) => {
                                if (!nav.children) {
                                    return (
                                        <Nav.Link as={Link} to={`${nav.id}`}>{nav.title}</Nav.Link>
                                    );
                                } else {
                                    return (
                                        <NavDropdown title={nav.title} id="basic-nav-dropdown">
                                            {nav.children.map((dropdown, idx) => (
                                                <NavDropdown.Item as={Link} to={`${dropdown.id}`}>{dropdown.title}</NavDropdown.Item>
                                            ))}
                                        </NavDropdown>
                                    );
                                }
                            })}
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>

            <Routes>
                {navLinks.map((nav, index) => {
                    if (!nav.children) {
                        return (
                            <Route path={`${nav.id}`} element={`${nav.component}`} /> 
                        );
                    } else {
                        return (
                            <Route path={`${nav.children.id}`} element={`${nav.children.component}`} />
                        );
                    }
                })}
            </Routes>
        </BrowserRouter>
    )
}

在下面也试过。

{navLinks.map((nav, index) => {
                if (!nav.children) {
                  return (
                    <Route path={`${nav.id}`} element={`${nav.component}`} />
                    
                  );
                } else {
                  return (
                    {nav.children.map((dropdown, idx) => (
                    <Route path={`${dropdown.id}`} element={`${dropdown.component}`}></Route>
                    ))}
                  );
                 
                }
                })}

但是会返回一个错误

我期望从一组常量动态创建路由，以便我们更轻松地维护应用程序。

Answer 1

在“constant.js”文件中导入所有相关组件并像这样使用它们：

import { DeviceAttributeMaintenance } from '../pages/DeviceAttributeMaintenance.jsx';
import { WaferPieceData } from '../pages/WaferPieceData.jsx';

export const navLinks = [
    {
        id: "manage",
        title: "Manage",
        children: [
            {
                id: 'manage/DevMaintenance',
                title: 'Device Attribute Maintenance',
                component: <DeviceAttributeMaintenance />
            },
            {
                id: 'manage/WaferPieceData',
                title: 'Wafer Piece Data',
                component: <WaferPieceData />
            }
        ]
    }
];

然后您可以像这样动态添加路线

<Routes>
    {navLinks.map((nav, index) => {
        if (!nav.children) {
            return (
                <Route path={nav.id} element={nav.component} /> 
            );
        } else {
            return nav.children.map((child, idx) => (
                <Route path={child.id} element={child.component} key={child.id}></Route>
            ));
        }
    })}
</Routes>