Как перенаправить на подвиды в суб-напрямую с помощью React?

Question

Заранее спасибо.

У меня проблема с этим одностраничным вложенным представлением приложения (AboutContact, AboutJobs, AboutPress) для отображения их компонента (представлений). Вместо этого отображается только окно просмотра.

Продукты и О компании - единственные компоненты, которые отображаются правильно

Структура каталогов

└── src
    ├── about
    │   ├── index.js
    │   ├── jobs.js
    │   ├── press.js
    │   └── contact.js
    ├── products
    ├── App.js
    ├── index.js
    └── index.html </root>

Приложение. js

import React, { Component } from "react";
import {
    Route,
    NavLink,
    Switch,
    BrowserRouter as Router,
} from "react-router-dom";

import Home from "./home";
import About from "./about/index";
import AboutContact from "./about/contact";
import AboutJobs from "./about/jobs";
import AboutPress from "./about/press";
import Products from "./products/index";

class App extends Component {
    render() {
        return (<Router>
        <header>
            <ul>
                <li><NavLink to="/about">About</NavLink>
                    <ul>
                        <li><NavLink to="/about/contact">Contact</NavLink></li>
                        <li><NavLink to="/about/jobs">Jobs</NavLink></li>
                        <li><NavLink to="/about/press">Press</NavLink></li>
                    </ul>
                </li>
                <li className="primary-nav-item"><NavLink to="/products">Products</NavLink>/li>
            </ul>
        </header>
        <div className="MainContent">
            <Route exact path="/" component={Home} />
                <Switch>
                    <Route path='/about' component={About} />
                    <Route path="/about/contact" component={AboutContact} />
                    <Route path="/about/jobs" component={AboutJobs} />
                    <Route path="/about/press" component={AboutPress} />
                </Switch>
                <Route path="/products" component={Products} />
            </div>
        </Router>);
    }
}
export default App;

Answer 1

Решение было довольно простым, и вот как это лучше всего объяснить.

** ФАКТИЧЕСКАЯ Структура Директории **

└── src
    ├── about
    │   └── index.js (see below)
    │       │   └── home.js (about content)
    │       ├── jobs
    │       │   └── index.js (jobs content)         
    │       ├── press
    │       │   └── index.js (press content)
    │       └── contact
    │           └── index.js (contact content)
    ├── products
    │   └── index.js
    │       └── home.js (product content)
    ├── App.js
    ├── home.js (home content)
    ├── index.js (SPA template)
    └── index.html </root>

** Приложение. js **

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

import Home from "./home";
import About from "./about/index";
import AboutContact from "./about/contact";
import AboutJobs from "./about/jobs";
import AboutPress from "./about/press";
import Products from "./products/index";

class App extends Component {
    render() {
        return (
            <Router>
                <header>
                    <NavLink to="/">Home</NavLink>
                    <NavLink to="/about">About</NavLink>
                    <NavLink to="/products">Products</NavLink>
                </header>
                <div className="MainContent">
                    <Route exact path="/" component={Home} />
                    <Route path='/about' component={About} />
                    <Route path="/products" component={Products} />
                </div>
            </Router>
        );
    }
}
export default App;

** О ** ./about/index . js

src
└── about
    └── index.js (contains sub-navigation and about content area
        └── home.js (contains about content)

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

import About from "./about/index";
import AboutContact from "./about/contact";
import AboutJobs from "./about/jobs";
import AboutPress from "./about/press";

class App extends Component {
    render() {
        return (
            <Router>
                <ul>
                    <li><NavLink to="/about">About</NavLink>
                    <li><NavLink to="/about/contact">Contact</NavLink></li>
                    <li><NavLink to="/about/jobs">Jobs</NavLink></li>
                    <li><NavLink to="/about/press">Press</NavLink></li>
                </ul>
              <div className="AboutContent">
          <Route exact path={`${ this.props.match.path}/`} component={About} / >
          <Route path={`${this.props.match.path}/contact`} component={AboutContact} />
          <Route path={`${this.props.match.path}/jobs`} component={AboutJobs} />
          <Route path={`${this.props.match.path}/press`} component={AboutPress} />
        </div >
            </Router>
        );
    }
}
export default App;

** Контакт ** дома (./home.js), о (./about/home.js), контакт (./about/contact/index.js), пресс-центр ... все будет так же, как показано ниже (очевидно, измените класс: AboutContact на любое соглашение о присвоении имен ./about/contact/index.js

import React, { Component } from "react";

class AboutContact extends Component {
    render() {
        return (<h1>Contact</h1>);
    }
}
export default AboutContact;