Использование response-router-dom для создания крошек

Question

Я пытаюсь использовать параметр соответствия для динамического создания имени компонента. В настоящее время я строю компоненты и мне нужно добавить панировочные сухари. Использование 'match' может быть не лучшим способом сделать это. Компонент BreadCrumbs отображает имя каждого компонента / страницы, но я пытаюсь выяснить, как показать иерархию. Например. Компания> Сайты> Панель инструментов сайта> Сайт AccDetails.

Спасибо.

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import logo from './assets/img/svg/OrisecLogo.svg'
import "./assets/scss/mdb.scss"

import LoginHome from './LoginHome'
import CompanyDashboard from './Components/Company/CompanyDashboard'
import CompanyAccDetails from './Components/Company/CompanyAccDetails'
import SiteDashboard from './Components/Company/Sites/SiteDashboard'
import SiteAccDetails from './Components/Company/Sites/SiteAccDetails'
import Sites from './Components/Company/Sites/Sites';

const App = () => <div>

    <Router>
        <div className="row">
            <div className="col-sm-6">
                <img src={logo} className="orisec-logo" alt="Orisec logo" />
            </div>
            <div className="col-sm-6 header-login pr-5">
                <Link to="/Login">Log In <i className="fa fa-sign-in-alt"></i></Link>
            </div>
        </div>
        <div className="container-fluid">
            <div className="row">
                <div className="col-sm-12">
                    <ul>
                        <li><Link to="/Login">Login</Link></li>
                        <li><Link to="/CompanyDashboard">Company Dashboard</Link></li>
                        <li><Link to="/CompanyAccDetails">Company Dashboard / Company Account Details</Link></li>
                        <li><Link to="/Sites">Sites</Link></li>
                        <li><Link to="/SiteDashboard">Site Dashboard</Link></li>
                        <li><Link to="/SiteAccDetails">Site Dashboard / Site Account Details</Link></li>
                    </ul>
                    <hr />
                    <Breadcrumbs />
                    <hr />
                    <Route path="/Login" component={LoginHome} />
                    <Route path="/CompanyDashboard" component={CompanyDashboard} />
                    <Route path="/CompanyAccDetails" component={CompanyAccDetails} />
                    <Route path="/Sites" component={Sites} />
                    <Route path="/SiteDashboard" component={SiteDashboard} />
                    <Route path="/SiteAccDetails" component={SiteAccDetails} />
                </div>
            </div>
        </div>
    </Router>;

  </div>

const Topics = ({ match }) =>

    <div>
        <div>
            <h2>Company Dashboard</h2>
            <ul>
                <li><Link to={`${match.url}/CompanyAccDetails`}>Account Details</Link></li>
                <li><Link to={`${match.url}/Sites`}>Sites</Link></li>
                <li><Link to={`${match.url}/Engineers`}>Engineers</Link></li>
            </ul>
        </div>
    </div>

const Breadcrumbs = () => <Route path="*" render={props => {
    let parts = props.location.pathname.split("/");
    const place = parts[parts.length - 1];
    parts = parts.slice(1, parts.length - 1);
    return <p>{parts.map(crumb)}/{place}</p>
}} />

const crumb = (part, partIndex, parts) => {
    const path = ['', ...parts.slice(0, partIndex + 1)].join("/");
    return <Link key={path} to={path} >{part}</Link>
}

export default App

Answer 1

Если у вас есть компонент для каждого случая match.params.topicId, вы можете создать словарь, который отображает значения topicId на соответствующий компонент.

Например, если у вас есть два возможных значения для topicId, которые topicId1 (связан с TopicId1 компонентом) и topicId2 (связан с TopicId2 компонентом), вы можете визуализировать свой компонент с помощью следующего кода:

const topicsMap = {
    topicId1: TopicId1,
    topicId2: TopicId2
};
const Topic = ({ match }) => {
    const TopicId = topicsMap[match.params.topicId] || TopicIdDefault;

    return (
        <div>
            <h3>{match.params.topicId}</h3>
            <TopicId />
            <CompanyDashboardMain/>
            <CompanyAccDetailsMain/>
        </div>
    );
};

Обратите внимание, что я определяю компонент по умолчанию TopicIdDefault на тот случай, если match.params.topicId не соответствует ни одному из ожидаемых значений ( topicId1 и topicId2 ).

Answer 2

Вы не можете создать экземпляр элемента React непосредственно из строки, вам придется поддерживать отображение строк в классы React.

const Map = { "componentA" : ComponentA }

// render
<Map[match.params.topicId] />