无法使用 react 获取要在本地浏览器上显示的内容

Question

我目前正在尝试使用 React 创建一个网站。但是正如标题所述，我似乎无法让我的内容出现在

localbrowser

中，而且我不确定我哪里出错了。

App.js

：

import React from "react";
import "./App.css"
import Layout from "./src/components/Layout/Layout";

function App()
{
  return <Layout />
}

export default App;

Routers.js

：

import { Routes, Route } from 'react-router-dom'

import Home from '../pages/Home';
import Shop from '../pages/Shop';
import Cart from '../pages/Cart';
import Product_Dets from '../pages/Product_Dets';
import Checkout from '../pages/Checkout';
import Login from '../pages/Login';
import Signup from '../pages/Signup';


Any help would be appreciated.

const Routers = () => {
    return(
     <Routes>
        <Route path="home" element={<Home />} />
        <Route path="shop" element={<Shop />} />
        <Route path="shop/:id" element={<Product_Dets />} />
        <Route path="cart" element={<Cart />} />
        <Route path="checkout" element={<Checkout />} />
        <Route path="login" element={<Login />} />
        <Route path="signup" element={<Signup />} />
      </Routes>
    );
};

export default Routers;

index.js

：

import React from "react";
import ReactDOM from "react-dom/client";
import "remixicon/fonts/remixicon.css";
import "bootstrap/dist/css/bootstrap.css";

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


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <BrowserRouter>
                <App />
        </BrowserRouter>
    </React.StrictMode>
);

Layout.jsx

：

import React from "react";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import Routers from "../../routers/Routers";

const Layout = () => {
    return(<>
          <Header />
            <div>
              <Routers />
            </div>
           <Footer />
        </>
    );
};

export default Layout;

我已经尝试更新 React 并在 stackoverflow 上查找了类似的问题，但无法找到解决方案。

编辑：添加控制台图像

Answer 1

呈现空白页面的最常见原因是代码片段中存在错误。请查看浏览器调试工具提供的信息。 根据 App.js 文件的

import Layout from "./src/components/Layout/Layout"; 

部分，我猜你可能将 index.js 和 App.js 放在根文件夹而不是 src 文件夹中。应用找不到启动入口，所以页面空白

Answer 2

问题出在

Routes

组件。您尚未定义当路径为

/

或

localhost:19007

时应该呈现的反应。

所以要解决这个问题，你需要在 Routers 组件中定义一个路径为“/”的新路由：

const Routers = () => {
return(
 <Routes>
    {/* add below line */}
    <Route path="/" element={<div>Homepage</div>} />
    
    <Route path="home" element={<Home />} />
    <Route path="shop" element={<Shop />} />
    <Route path="shop/:id" element={<Product_Dets />} />
    <Route path="cart" element={<Cart />} />
    <Route path="checkout" element={<Checkout />} />
    <Route path="login" element={<Login />} />
    <Route path="signup" element={<Signup />} />
  </Routes>
)};