Блог

Я создал приложение react. Но когда я пишу

запуск npm

результат, приведенный ниже:

 You can now view pizza-app in the browser.

  Local:            http://localhost:3000/react-pizza-app   
  On Your Network:  http://192.168.56.1:3000/react-pizza-app

Note that the development build is not optimized.
To create a production build, use npm run build.
 

Проблема в том, что он будет отображать только компонент заголовка, не отображая остальные.
Вот мой основной App.js код.

 import React, { useState } from "react";
import Header from './Header';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import Customize from "./Customize";
import Checkout from './Checkout';

function App() {

  const [ingredients, setIngredients] = useState({
    basil: false,
    cheese: false,
    mushroom: false,
    olive: false,
    pineapple: false,
    tomato: false,
  });

  return (
    <>
    <Header />
    <Router>
    <Switch>
          <Route exact path="/">
            <Customize ingredients = {ingredients} setIngredients={setIngredients} />
          </Route>
          
          <Route path="/checkout">
          <Checkout ingredients = {ingredients} />
          </Route>
        </Switch>
    </Router>
    </>
    
  );
};

export default App;
 

Если я сброшу свою домашнюю страницу на «.», тогда будут показаны все компоненты. И приложение будет работать бесперебойно. Я также вставлю свой файл package.json.

 "name": "pizza-app",
  "homepage": "http://editorawais.github.io/react-pizza-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.1",
    "@testing-library/user-event": "^12.2.0",
    "framer-motion": "^2.9.4",
 

Я также хочу развернуть это приложение на github. Пожалуйста, помогите мне, в чем проблема на самом деле. И каким должно быть решение.

Я считаю, что вам нужно установить базовое имя Router для каталога, из которого он обслуживается, т. Е. «/ react-pizza-app».

basename

Базовый URL-адрес для всех местоположений. Если ваше приложение обслуживается из подкаталога на вашем сервере, вы захотите установить его в подкаталог. Правильно отформатированное базовое имя должно иметь начальную косую черту, но не завершающую косую черту.

 function App() {
  const [ingredients, setIngredients] = useState({
    basil: false,
    cheese: false,
    mushroom: false,
    olive: false,
    pineapple: false,
    tomato: false,
  });

  return (
    <>
    <Header />
    <Router basename="/react-pizza-app">
    <Switch>
          <Route exact path="/">
            <Customize ingredients = {ingredients} setIngredients={setIngredients} />
          </Route>
          
          <Route path="/checkout">
          <Checkout ingredients = {ingredients} />
          </Route>
        </Switch>
    </Router>
    </>
    
  );
};