Как сделать адаптивный макет детализации с помощью response-router v4, как описано в «философии»

Question

Я пытаюсь создать адаптивный макет Master / Detail с использованием response-router v4, как описано здесь .Код, который он предлагает:

const App = () => (
    <AppLayout>
    <Route path="/invoices" component={Invoices}/>
    </AppLayout>
)

const Invoices = () => (
    <Layout>

    {/* always show the nav */}
    <InvoicesNav/>

    <Media query={PRETTY_SMALL}>
        {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            </Switch>
        // large screen does!
        : <Switch>
            <Route exact path="/invoices/dashboard" component={Dashboard}/>
            <Route path="/invoices/:id" component={Invoice}/>
            <Redirect from="/invoices" to="/invoices/dashboard"/>
            </Switch>
        }
    </Media>
    </Layout>
)

Однако я не могу заставить что-то работать на этом основании.Есть несколько вещей, в которых я не уверен:

1) Что это за компонент AppLayout?

2) На какой компонент Layout он ссылается и это важно?

3) Я предполагаю, что тег Media относится к реагирующим медиа?

4) Медиа-запрос = {PRETTY_SMALL} означает что-то вроде медиа-запроса = {{maxWidth: 599}}

5) нигде нет компонента Router, который мне хотя и был нужен

6) нигде нет объектов Link

лучшее, что я придумал до сих пор (в проекте, начатом)с create-реагировать-приложение) это

import Media from "react-media";
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';

const data = [
    {
        id: 1,
        to: 'Mr. Smith',
        amount: 10
    },
    {
        id: 2,
        to: 'Mrs. Jones',
        amount: 100
    }
]

const InvoicesNav = () => (
    <div>
        Nav Bar
    </div>
)

const Dashboard = () => (
    <div>
        Dashboard
    </div>
)

const Invoice = () => (
    <div>
        Invoice
    </div>
)

const App = () => (
    // <AppLayout>
    <Route path="/invoices" component={Invoices} />
    // </AppLayout>
)

const Invoices = () => (
    // <Layout>
    <div>

        {/* always show the nav */}
        <InvoicesNav />

        <Media query={{ maxWidth: 599 }}>
            {screenIsSmall => screenIsSmall
                // small screen has no redirect
                ? <Switch>
                    <Route exact path="/invoices/dashboard" component={Dashboard} />
                    <Route path="/invoices/:id" component={Invoice} />
                </Switch>
                // large screen does!
                : <Switch>
                    <Route exact path="/invoices/dashboard" component={Dashboard} />
                    <Route path="/invoices/:id" component={Invoice} />
                    <Redirect from="/invoices" to="/invoices/dashboard" />
                </Switch>
            }
        </Media>
        {/* </Layout> */}
    </div>
)

export default App;

Но это все равно на самом деле не делает ничего, что напоминает адаптивный макет Master / Detail и не делает ничего в примерах для реакции-маршрутизатора, насколько я могуувидеть.(

Answer 1

Этот макет - просто представление о структуре вашего приложения.Они не дают подробностей об этом, поэтому вы можете использовать любой контент для неизвестных тегов, переменных и т. Д.

Я не могу точно воспроизвести его, потому что IMO <InvoicesNav /> не должно быть всегдаотображается, потому что в мобильном представлении нет места для этого при просмотре панели мониторинга или точного счета.Я предположил, что <InvoicesNav /> является левой боковой панелью счетов с их идентификаторами.

Я надеюсь, что вы сможете найти ответы на свои вопросы в этой базовой реализации этой философии github.com / vogdb / реаги-маршрутизатор-mediaquery-пример .Также есть еще один очень подробный пример https://github.com/AWebOfBrown/React-MQL-Manager.

import Media from "react-media";
import React, {Component} from 'react';
import {Route, Switch, Link} from 'react-router-dom';

const InvoiceList = (props) => {
  return <ul>
    <li key="dashboard">
      <Link to="/invoices/dashboard"><span>Dashboard</span></Link>
    </li>
    {props.invoices.map((invoice) =>
      <li key={invoice.id}>
        <p><Link to={`/invoices/${invoice.id}`}><span>To:</span>{invoice.to}</Link></p>
        <p><span>Amount:</span>{invoice.amount}</p>
        <p><span>Paid:</span>{invoice.paid ? 'Yes' : 'No'}</p>
        <p><span>Due:</span>{invoice.due.toDateString()}</p>
      </li>
    )}
  </ul>
};

const Dashboard = (props) => {
  const balance = props.invoices.reduce((sum, invoice) => sum + invoice.amount, 0);
  const unpaidNum = props.invoices.reduce((num, invoice) => num + !invoice.paid, 0);
  return <div>
    Dashboard:
    <div>Unpaid: {unpaidNum}</div>
    <div>Balance: {balance}</div>
  </div>
};

const Invoice = (props) => {
  const id = parseInt(props.match.params.id);
  const invoice = props.invoices.find(invoice => invoice.id === id);
  return <div>
    Invoice #{id}, to: {invoice.to}
  </div>
};

const Layout = (props) => (
  <div className="invoicesLayout">
    {props.children}
  </div>
);

const InvoicesSmallScreen = (props) => {
  const {invoices} = props;

  return (<div>
    <Link to="/invoices">Show Invoices</Link>
    <Switch>
      <Route exact path="/invoices" render={props => <InvoiceList invoices={invoices} {...props}/>}/>
      <Route exact path="/invoices/dashboard" render={props => <Dashboard invoices={invoices} {...props}/>}/>
      <Route path="/invoices/:id" render={props => <Invoice invoices={invoices} {...props}/>}/>
    </Switch>
  </div>)
};

const InvoicesBigScreen = (props) => {
  const {invoices} = props;
  return (<div>
    <InvoiceList invoices={invoices}/>
    <Switch>
      <Route exact path="/invoices/dashboard" render={props => <Dashboard invoices={invoices} {...props}/>}/>
      <Route path="/invoices/:id" render={props => <Invoice invoices={invoices} {...props}/>}/>
    </Switch>
  </div>)
};

class Invoices extends Component {
  constructor(props) {
    super(props);
    this.state = {
      invoices: []
    }
  }

  componentDidMount() {
    // generate some dummy data here
    const data = [];
    this.setState({invoices: data})
  }

  render() {
    const {invoices} = this.state;

    return (
      <Layout>
        <Media query={{maxWidth: 599}}>
          {screenIsSmall => screenIsSmall ?
            <InvoicesSmallScreen invoices={invoices}/>
            : <InvoicesBigScreen invoices={invoices}/>
          }
        </Media>
      </Layout>
    )
  }
}

export default Invoices;