Javascript 在react上引入路由时网页不工作

我正在使用Webpack4为我的web应用程序自动化一些任务

当运行命令时，页面在生产模式上显示为空白：npm run build

它与npm运行启动一起工作，一切正常。问题是webpack无法以某种方式处理此部分：

<BrowserRouter><AppRoutes/></BrowserRouter>

我不知道为什么在生产应用程序没有显示所有的组件

有什么帮助吗

编辑：

My routes.js如下所示：

import React from "react";
import { Switch, Route } from 'react-router-dom';
import Helloworld from './components/helloworld/helloworld.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from "./components/thirdview/thirdview.component";

const AppRoutes = () => (
    <main>
        <Switch>
            <Route exact path='/' component={Helloworld}/>
            <Route path='/secondview' component={SecondView}/>
            <Route path='/thirdview' component={ThirdView}/>
            <Route path='/thirdview/:number' component={ThirdView}/>
        </Switch>
    </main>
);

export default AppRoutes;

从“React”导入React；
从“react router dom”导入{Switch，Route}；
从“./components/Helloworld/Helloworld.component”导入Helloworld；
从“./components/SecondView/SecondView.component”导入SecondView；
从“/components/ThirdView/ThirdView.component”导入ThirdView；
常数批准=（）=>(
);
导出默认批准；

如果我将

更改为

，它可以工作，但是在导航到其他组件时出现问题，在生产模式下打开index.html时，我的页面url会有所不同

尝试从helloworld组件导航到secondview组件时（在删除exact-from-Route标记后）出现的错误是：

DomeException:未能对“历史记录”执行“pushState”：历史记录 使用URL'声明对象file:///secondview无法在中创建 来源为“null”且URL为的文档 'file:///home/webapp/Desktop/myapp/dist/index.html"

使用Express提供应用程序 基本上，当您更改路径时，您将远离index.html，除非您为react应用程序提供某种服务器。尝试使用以下内容为索引设置express server：

const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = express()

// serve static assets eg. js and css files
app.use(express.static(__dirname + '/public'))

// Handles all routes
app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

---

您可以将其作为server.js放在根目录中，确保在sendFile行中引用了index（现在假定index.html位于/public目录中），使用

babel node server.js运行此命令，并且应该在localhost:3000上为您的应用程序提供服务。
基本上，helloworld组件不会在prod模式的某个位置被调用，如果我更改为它可以工作，但是我在导航到其他组件时遇到问题，在生产模式下打开index.html时，我的页面url会有所不同。在生产模式下打开时，是否有控制台日志或错误消息？@SteveBanton请查看编辑的部分以了解我的问题！我认为问题可能是您需要为index.html提供服务器，以便react路由器接收路径。请看下面我的答案！我想你是对的，我需要在服务器上运行index.html！我要试试这个！使用thnx，您是否知道我可以在不使用任何服务器直接打开index.html时以某种方式配置路由和URL。没问题。我认为这样不行。这样想-浏览器正在访问
file:///home/webapp/Desktop/myapp/dist/
在文件树中获取index.html。如果您尝试将url更改为
file:///home/webapp/Desktop/myapp/dist/second/
按一下route，它将访问什么？如果该文件夹不存在于您的文件树中（它可能不存在），该怎么办？你需要一个能够处理所有路由并将它们传递给路由器的服务器。实际上，它不起作用，我试图将dist文件夹添加到ubuntu var/www/html中的web服务器中，并试图从浏览器访问，所以我仍然看到一个空页，所以基本上helloworld组件没有显示！一点也不叫！您必须使用服务器来提供捆绑的js、css和html文件。这是上面的快线。然后，使用通配符处理路由-这是app.get（'*'行，它将所有路由（例如
localhost:3000/second/
）定向到index.html。在这里，js、css和html文件相对于server.js的位置是/public的。只要它能找到您的文件，就应该可以工作。
import React from "react";
import { Switch, Route } from 'react-router-dom';
import Helloworld from './components/helloworld/helloworld.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from "./components/thirdview/thirdview.component";

const AppRoutes = () => (
    <main>
        <Switch>
            <Route exact path='/' component={Helloworld}/>
            <Route path='/secondview' component={SecondView}/>
            <Route path='/thirdview' component={ThirdView}/>
            <Route path='/thirdview/:number' component={ThirdView}/>
        </Switch>
    </main>
);

export default AppRoutes;

const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = express()

// serve static assets eg. js and css files
app.use(express.static(__dirname + '/public'))

// Handles all routes
app.get('*', function (request, response){
    response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)