npm react-router-dom在构建后提供空白页面

xzv2uavs 于 2023-01-21 发布在 React

关注(0)|答案(1)|浏览(156)

每当我有一个使用react-router-dom的React项目时，它在开发模式下使用“npm start”命令就能完美地工作，但是当我运行构建并将其部署到apache服务器时，例如，我会得到一个空白页面，上面有项目的标题和图标。
下面是我一直在写的一些路线示例：

import { BrowserRouter, Routes as Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import Hello from "./pages/Hello";

function Routes() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path='/' element={<Home />} />
                <Route path='/hello' element={<Hello />} />
            </Switch>
        </BrowserRouter>
    )
}

export default Routes;

index.js文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Routes from './Routes';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Routes />
);

npm

来源：https://stackoverflow.com/questions/75146481/react-router-dom-gives-blank-page-after-build

1条答案

按热度按时间

0wi1tuuw1#

我刚刚弄明白了是怎么回事。我使用了create-react-app，它假设你试图在一个域的根路径上托管你的项目，这在我的例子中是不正确的。我试图在“localhost/routes”托管应用程序，create-react-app假设它只是“localhost”。通过一些修改，我可以让我的代码按照我预期的方式工作。
将基本名称属性添加到BrowserRouter：

import { BrowserRouter, Routes as Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import Hello from "./pages/Hello";

function Routes() {
    return (
        <BrowserRouter basename='/routes'>
            <Switch>
                <Route path='/' element={<Home />} />
                <Route path='/hello' element={<Hello />} />
            </Switch>
        </BrowserRouter>
    )
}

export default Routes;

我还必须将这行代码放入package.json文件中：

"homepage": ".",

赞(0）回复(0）举报 2023-01-21

我来回答

npm react-router-dom在构建后提供空白页面

1条答案

相关问题

热门标签

最新问答