Как отобразить компонент React на любой другой странице, кроме index.html

Я создал базовое приложение для реагирования с

npx create-react-app

Я могу создавать компоненты в index.js и отображать их в элементе index.html.

Однако это единственная страница, на которой я могу их отобразить, например, я не могу использовать тот же компонент на странице login.html или на любой другой странице, кроме index.html.

Я тестирую это с npm start.


reactjs react-component
person Jonathan    schedule 08.05.2018    source источник
comment
У вас будет только один файл html, а затем вы создадите несколько компонентов и отобразите компонент верхнего уровня в файле html. для нескольких страниц в вашем приложении вы должны использовать маршрутизатор, обычно реагирующий на маршрутизатор   -  person Shubham Khatri    schedule 08.05.2018
comment
@ShubhamKhatri А другого выхода нет? Чтобы он работал с несколькими страницами?   -  person Jonathan    schedule 08.05.2018
comment
У вас может быть любое количество HTML-страниц. Но для каждого из них потребуется своя настройка. И загрузите для каждого отдельный файл javascript. Затем сделайте свои ссылки прямыми ссылками со страницы на страницу. Однако не ожидайте, что Redux будет работать между страницами (без повторной выборки данных)   -  person Got The Fever Media    schedule 08.05.2018
comment
Лучшее решение - просто использовать чистый js на других страницах.   -  person Jonathan    schedule 08.05.2018

Ответы (2)


arrow_upward
3
arrow_downward

Обычно React используется для одностраничных приложений, поэтому вы просто визуализируете приложение на одной странице, а затем используете маршрутизацию (обычно с react-router) для имитации навигации в браузере.

Однако вы можете отобразить его на нескольких страницах ... вам нужно только скопировать код активации JavaScript на другие страницы

Просто скопируйте это в свой login.html (взято из выходных данных приложения create-response-app по умолчанию):

<noscript>
  You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/bundle.js"></script>
person keul    schedule 08.05.2018

arrow_upward
1
arrow_downward

Зачем тебе это нужно? Помните, что React по своей природе утверждает, что является SPA (одностраничным приложением). Этого должно быть достаточно, чтобы вы понимали, что единственной страницей является (должна быть) index.html.

В любом случае вы можете сделать это, просмотрев файл index.html по умолчанию, созданный с помощью create-response-app, а также файл manifest.json.

Начиная с manifest.json, у вас должен быть этот JSON:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Или что-то вроде этого. Вы можете указать свойство "start_url", которое является отправной точкой, с которой веб-сервер create-response-app webpack dev-server по умолчанию будет обслуживать вас, когда вы запрашиваете ЛЮБОЙ путь на локальном адресе, на котором он запущен (localhost: обычно 3000 ). Изменив это свойство, вы можете заставить его обслуживать нужную страницу, например login.html.

Теперь, глядя на код по умолчанию index.html, у вас должно получиться что-то вроде этого:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

Как видите, в конце страницы есть

<div id="root"></div>

Именно здесь React отображает то, что есть ReactDOM.render (jsx, ElementID) jsx. Фактически, если вы посмотрите в index.js, ReactDOM выглядит так:

ReactDOM.render(
    <Something />,
, document.getElementByID('root'));

Вы можете видеть, что ElementID ('root') - это идентификатор элемента div, в котором вы хотите отобразить jsx (). Если вы создаете новую страницу, скажем, login.html, копируете и вставляете содержимое index.html и меняете идентификатор элемента, вы затем можете выбрать отображение своего содержимого там, изменив также реферальный ElementID для ReactDOM.render (). Работая над этим, вы должны получить желаемый результат, но, как было сказано ранее, на мой взгляд, вам это не нужно.

person FrankS    schedule 08.05.2018
comment
Ваше решение не работает, ReactJS (с create-react), кажется, всегда смотрит на index.html, несмотря ни на что. - person GWorking; 17.10.2018