时间戳

首页 > 解决方案 > 用主页路径反应路由器问题

reactjs - 用主页路径反应路由器问题

问题描述

我做了一个反应应用程序。但是当我写

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.

问题是它只会显示 Header 组件而不显示其他组件。这是我的主要 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。请帮助我实际上是什么问题。应该是什么解决方案。

标签： reactjsreact-router-dom

解决方案

我相信您需要设置的基本名称以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>
    </>
    
  );
};

推荐阅读