Как я делаю подчиненные с вложенными компонентами

Question

Как правильно настроить компоненты, если ваше приложение имеет следующие маршруты.

1. exampleapp.dev - домашняя страница
2. exampleapp.dev / dashboard - страница панели инструментов с боковой панелью и основным содержимым
3. exampleapp.dev / dashboard / resource / create - та же боковая панель, другое содержимое, содержащее форму для сбора данных

App.js

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

import Navbar from "./components/layouts/Navbar";
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Dashboard from "./components/dashboard/Dashboard";
import Footer from "./components/layouts/Footer";

import "./App.css";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navbar />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route exact path="/dashboard" component={Dashboard} />
            {/* 
              Do i do this
              <Route exact path="/dashboard/resource/create" component={Form} />
            */}
          </Switch>
          <Footer />
        </div>
      </Router>
    );
  }
}

export default App;

Dashboard.js

import React, { Component } from "react";
import Sidebar from "./Sidebar";
import Main from "./Main";

class Dashboard extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div id="sidebar" className="col-md-3">
            <Sidebar />
          </div>
          <div id="main" className="col-md-9">
            <Main />
          </div>
        </div>
      </div>
    );
  }
}

export default Dashboard;

Когда пользователь переходит на exampleapp.dev / dashboard / resource / create

Я только хочу изменить содержимое в div с идентификатором main

У меня есть компонент, которыйимеет форму.

Form.js

import React, {Component} from 'react';

class Form extends Component {

    render() {
        return (
            <div>
                <h1>Form goes in here</h1>
            </div>
        );
    }

}

export default Form;

Должен ли я создать новый компонент с именем CreateResource.js, повторить все в Dashboard.js и просто поменятьсяthe with

Как правильно это сделать?Используем React-Router-Dom?

Answer 1

Вы можете использовать nested routes, если вы не используете атрибут exact на верхнем уровне.Также компонент Switch позволяет вам визуализировать только один Route, чтобы вы могли изменить порядок маршрутов так, чтобы маршруты с префиксными путями к другим маршрутам были в конце

<Router>
    <div className="App">
      <Navbar />
      <Switch>
        <Route exact path="/about" component={About} />
        <Route path="/dashboard" component={Dashboard} />
        <Route exact path="/" component={Home} />
      </Switch>
      <Footer />
    </div>
  </Router>

И вкомпонент приборной панели у вас будет

class Dashboard extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div id="sidebar" className="col-md-3">
            <Sidebar />
          </div>
          <div id="main" className="col-md-9">
            <Switch>
                 <Route path="/dashboard/resource/create" component={Form} />
                 <Route component={Form} />
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}

export default Dashboard;