Reactjs 如何利用React路由器实现具有合适组件的遗传路由

我试图从“要素”对象生成具有适当组件的管线。其想法是拥有一个可以启用或禁用的网站功能集合，以及由此集合生成的路线/导航菜单项。类似于路线和导航项的功能切换。我已经到达页面运行的最远位置，但是任何导航都只加载列表中的第一项，尽管url在浏览器url栏中得到更新

以下是“功能”对象：

这是index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.scss';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
    <React.StrictMode>
        <Router>
            <App />
        </Router>
    </React.StrictMode>,
    document.getElementById('root'),
);

我是一个年轻的学徒，当谈到反应，所以我可能会在错误的轨道上，但任何建议如何使这项工作将不胜感激。谢谢。

问题

开关

组件实际上只有两个有效的子组件：

路由

和

重定向

。

开关

将返回并呈现它找到的第一个“匹配项”，在这种情况下，它将点击第一个子

div

并呈现该子项

<Switch>
  <Route exact path="/">
    <LandingPage />
  </Route>
  {siteFeatures.map((feature) => (
    <div key={feature.id}> // <-- not a Route or Redirect so gets rendered
      {feature.isEnabled && <Route path={feature.path}>{feature.component}</Route>}
    </div>
  ))}
  <Route path="/404">
    <PageNotFound />
  </Route>
  <Redirect to="/404" />
</Switch>

{siteffeatures.map（（功能）=>(
//isEnabled）。地图（（功能）=>(
))}

先生，在我眼里你是摇滚明星！谢谢你，成功了！

    import React, { useEffect, useState } from 'react';
    import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
    import './styles/App.scss';
    import Footer from './components/Footer';
    import Navigation from './components/Navigation';
    import AboutPage from './components/pages/AboutPage';
    import LandingPage from './components/pages/LandingPage';
    import PageNotFound from './components/pages/PageNotFound';
    import background from './images/background.jpg';
    import { createStyles, makeStyles, Theme, ThemeProvider } from '@material-ui/core';
    import siteThemeCollection from './styles/siteThemeCollection';
    import ActualsPage from './components/pages/ActualsPage';
    import EventsPage from './components/pages/EventsPage';
    import DonationPage from './components/pages/DonationPage';
    import ContactPage from './components/pages/ContactPage';
    import getSiteFeatures from './services/featureToggle';
    import SiteFeature from './common/SiteFeature';
    
    const themeCollection = siteThemeCollection();
    
    function App(): JSX.Element {
        const useStyles = makeStyles((theme: Theme) =>
            createStyles({
                root: {
                    flexGrow: 1,
                },
                appContainer: {
                    backgroundImage: `url(${background})`,
                    backgroundPosition: 'center',
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: 'cover',
                    display: 'flex',
                    flexDirection: 'column',
                    minHeight: '100vh',
                    opacity: 1,
                },
            }),
        );
    
        const pageStyle = useStyles();
    
        const [siteFeatures, setSiteFeatures] = useState<SiteFeature[]>([]);
    
        useEffect(() => {
            setSiteFeatures(getSiteFeatures);
        }, []);
    
        return (
            <>
                <ThemeProvider theme={themeCollection.defaultSiteTheme}>
                    <div className={pageStyle.appContainer}>
                        <div className="app-content">
                            <Switch>
                                <Route exact path="/">
                                    <LandingPage />
                                </Route>
                                {siteFeatures.map((feature) => (
                                    <div key={feature.id}>
                                        {feature.isEnabled && <Route path={feature.path}>{feature.component}</Route>}
                                    </div>
                                ))}
                                <Route path="/404">
                                    <PageNotFound />
                                </Route>
                                <Redirect to="/404" />
                            </Switch>
                        </div>
                        <Footer />
                    </div>
                </ThemeProvider>
            </>
        );
    }
    
 export default App;

import SiteFeature from '../common/SiteFeature';
import AboutPage from '../components/pages/AboutPage';
import ActualsPage from '../components/pages/ActualsPage';
import EventsPage from '../components/pages/EventsPage';

const getSiteFeatures = (): SiteFeature[] => {
    const siteEmabledFeatures: SiteFeature[] = [];
    const inactive: SiteFeature[] = [];

    siteEmabledFeatures.push(
        new SiteFeature('null1', ActualsPage, {
            name: 'actual',
            displayName: 'Aktuális',
            path: '/actuals',
            icon: 'new_releases',
            isEnabled: true,
            isNavOpion: true,
        }),
        new SiteFeature('null2', AboutPage, {
            name: 'about',
            displayName: 'Bemutatkozás',
            path: '/about',
            icon: 'info',
            isEnabled: true,
            isNavOpion: true,
        }),
        new SiteFeature('null3', EventsPage, {
            name: 'events',
            displayName: 'Események',
            path: '/events',
            icon: 'events',
            isEnabled: true,
            isNavOpion: true,
        }),

    return siteEmabledFeatures;
};

export default getSiteFeatures;

<Switch>
  <Route exact path="/">
    <LandingPage />
  </Route>
  {siteFeatures.map((feature) => (
    <div key={feature.id}> // <-- not a Route or Redirect so gets rendered
      {feature.isEnabled && <Route path={feature.path}>{feature.component}</Route>}
    </div>
  ))}
  <Route path="/404">
    <PageNotFound />
  </Route>
  <Redirect to="/404" />
</Switch>

<Switch>
  <Route exact path="/">
    <LandingPage />
  </Route>
  {siteFeatures.filter(({ isEnabled }) => isEnabled).map((feature) => (
    <Route
      key={feature.id}
      path={feature.path}
      component={feature.component}
    />
  ))}
  <Route path="/404">
    <PageNotFound />
  </Route>
  <Redirect to="/404" />
</Switch>