ReactJS - Разное содержание для разных URL (путей маршрутов), поэтому оно выглядит как многостраничное приложение. - PullRequest
Новая
       37

ReactJS - Разное содержание для разных URL (путей маршрутов), поэтому оно выглядит как многостраничное приложение.

1 голос
/ 06 февраля 2020

Я из Java фона и новичок в ReactJS. Извините, если это глупый вопрос, но я застрял в этом вопросе на несколько дней. Пожалуйста, помогите, если можете.

Насколько я понимаю, реакция на одностраничные приложения. За последние пару недель я провел несколько тестовых разработок и играл с Router et c. Но я не могу понять, как вы реагируете на создание разного контента на разных URL. Вот что я пытаюсь эмулировать:

  1. http://localhost: 3000- пустая страница с полем для входа
  2. http://localhost: 3000 / home - панель инструментов с панелью меню в верхней части
  3. http://localhost: 3000 / около - страница с другой информацией, но с той же строкой меню, что и 'home'

Я не хочу, чтобы кто-либо отвечал с подробностями о том, как создавать компоненты / макеты (я очень хорошо знаком с CSS, HTML, et c), я не понимаю, как создать «одностраничное приложение» с совершенно разным контентом для разных URL-адресов (путей маршрутов).

Если бы это было java, я бы шаблонировал HTML и разные страницы будут обслуживаться для разных URL. Но это на стороне сервера.

Я попытался назначить компонент для разных маршрутов: <Route path="/home" exact component = {Home} /> и создать контент в этом компоненте, но это не работает (я думаю, что застрял в Java приземляется и все еще думает о «подаче» контента).

Когда я смотрю на Facebook (провайдер React), мне кажется, что все действия в меню вверху открываются на той же странице, но я не могу отработать Как разные компоненты могут быть скрыты? и появляется ?? на основе разных маршрутов.

Может быть, я неправильно понял, и уникальные HTML страницы используются для разных маршрутов ??

Пожалуйста, дайте мне знать, что такое лучший метод и как я достигните этого.

Если вы можете указать мне видео на YouTube или несколько упрощенных пошаговых инструкций, я был бы очень очень признателен.

Я искал в Интернете такие вещи, как "разные компоненты реакции на разные маршруты ", но не нашли ничего, что действительно показывало бы, как это работает и какова лучшая практика.

Пожалуйста, помогите!

Ответы [ 3 ]

3 голосов
/ 06 февраля 2020

TLDR:

Вы не ошиблись. Один и тот же файл HTML используется для «подачи» (или «рендеринга») разного контента для разных маршрутов. Вам, вероятно, нужно дважды проверить код компонента и маршрутизатора, но идея <Route path="/home" exact component={Home} /> верна.

Мой длинный и скучный ответ

Немного истории и контекста:

Как вы упоминали, пару лет go обычным способом создания веб-сайта было создание сервера с некоторым внутренним кодом, который не только обрабатывал бы, какая страница HTML должна отображаться, но и какие данные будут отображаться. Большая часть операций будет выполняться в бэкэнде, а интерфейс был заинтересован только в том, чтобы отображать данные приятным образом.

С ростом Javascript и его популярностью в операциях стало выполняться больше операций. внешний интерфейс. И по мере того, как браузеры становятся все более мощными, с Javascript можно делать все больше и больше вещей. Сортировка таблиц, фильтрация данных и AJAX запросы являются некоторыми примерами.

Люди начали изменять DOM (это означает, что они использовали Javascript вместо языка бэкэнда, чтобы изменить, какие данные должны отображаться и как они должны отображаться.)

Одностраничное приложение (IMHO):

Основная идея одностраничного приложения (SPA) заключалась в улучшении этого процесса. Возьмите ReactJS например. Концепция этого (по моим собственным словам):

«Как я могу быстро изменить отображаемые данные, используя меньшую вычислительную мощность и создавая лучший опыт для пользователя?»

И ответ (также в моих собственных словах) был:

"давайте обновим только те элементы экрана, которые необходимо обновить. Все остальное останется прежним, поэтому мы не будем Мне не нужно повторно отображать его. "

Для меня это означает, что многие приложения теперь могут использовать ReactJS (или Vue, Angular, et c) быть более мощным и удобным для пользователя. Но это также означает, что не каждое приложение должно быть построено как SPA. Для меня все еще есть много действительного использования в «традиционном» приложении, где бэкэнд все еще имеет большой контроль над данными.

Наконец, вы отвечаете:

Тем не менее, Я бы сказал, что первое, о чем стоит подумать, если вам действительно нужен SPA;)

Если вы это сделаете, я вижу два способа контролировать, какие данные должны отображаться:

Во-первых, с условным рендером "Pure":

Это означает большой if в вашем Javascript. Для простоты, вот пример: 

var openMenu = "Home"

if (openMenu == "Home") {
   showHomePage()
} else if (openMenu == "About") {
   showAboutPage()
}

function showHomePage() {
   return <HomeComponent />
}

Во-вторых, с управлением маршрутизатором

Используя react-router или подобные вещи, вы на самом деле «перемещают» ваш оператор Javascript if в URL вместо локальной переменной ?

Некоторые люди с этим не согласятся. Использование URL для отображения определенного c содержимого больше нельзя классифицировать как одностраничное приложение , поскольку первоначальная идея состоит в том, чтобы контролировать то, что отображается на экране, через Javascript, а не через URL.

Некоторые люди согласятся, заявив, что различные URL-адреса помогут в SEO, организации и позволят пользователям создавать закладки или делиться ссылками.

В конце вам просто нужно подумать о макете страницы ( или структура) и напишите это в HTML. Затем поместите оператор if вокруг частей, которые должны измениться. Либо так: 

<App>
    <Menu />
        {(openMenu == "Home") && <Home />}
        {(openMenu == "About") && <About />}
    <Footer />
</App>

или 

<App>
    <Menu />
        <Router>
            <Route path="/home" component={Home} />
            <Route path="/about" component={About} />
        </Router>
    <Footer />
</App>

Надеюсь, что это даст вам немного больше направлений ?

1 голос
/ 07 февраля 2020

Я создал песочницу для примера кода React Router с очень минимальным кодом. Я надеюсь, что это поможет понять, и вы можете поиграть. Как вы можете видеть, я переместил Navbar за пределы компонентов уровня страницы

Вот рабочий пример https://codesandbox.io/s/react-router-dom-example-8vcqu?from-embed

Добавление некоторого кода из этого примера 

import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contacts from "./Contacts";
import NavBar from "./Navbar";

Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function Contacts() {
  return <h1>Contacts</h1>;
}

const NavBar = () => {
  return (
    <div className="navbar">
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contacts">Contacts</Link>
        </li>
      </ul>
    </div>
  );
};


const App = () => (
  <BrowserRouter>
    <NavBar />
    <Switch>
      <Route path="/" component={Home} exact />
      <Route path="/about" component={About} exact />
      <Route path="/contacts" component={Contacts} exact />
      <Redirect to="/" />
    </Switch>
  </BrowserRouter>
);

render(<App />, document.getElementById("root"));
0 голосов
/ 09 февраля 2020

вы пишете свою логику маршрутизации c внутри приложения. js или любой файл в зависимости от вашего проекта. в индексе. js

 import React from "react"
    import ReactDOM from "react-dom"
    import {BrowserRouter} from "react-router"
    import App from "./App"

    ReactDom.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById("root"))

BrowserRouter жестко запрограммирован на получение адреса. Он полностью разработан для просмотра URL-адреса в адресной строке браузера. Он читает URL-адрес и, если он видит какой-либо маршрут, имеющий тот же путь с этим URL-адресом, он вставляет компонент этого маршрута в html и ReactDom отображает его.

...