Reactjs React Router with Express，子页面在生产中未正确路由

我有一个React应用程序，由React路由器和Heroku上托管的express构建。我可以导航到主页（“/”）到其他页面（“/about”），但如果我尝试从浏览器直接导航到子页面（例如“/about”），Express将返回500错误

我尝试总是返回index.html页面，而不管请求如何，然后让React Router处理路由，但有些实现不正确。这只发生在Heroku的

制作中；我的本地开发环境路由工作正常

非根页面上的图像也会被破坏

文件结构：

build
..static
....css
....js
....media
node_modules
public
server
..server.js
src
..config
....switch.js
..imgs
..pages
..scss
..App.js
..index.js
package.json
Procfile
README.md
static.json

const path = require('path');
const sslRedirect = require('heroku-ssl-redirect').default;
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(sslRedirect());

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('build'));
  app.get('*', (req, res) => {
        res.sendFile('index.html');
  });
} else {
  const publicPath = path.join(__dirname, '..', 'public');app.use(express.static(publicPath));app.listen(port, () => {
    console.log(`Server is up on port ${port}!`);
  });
  app.get('*', (req, res) => {
    res.sendFile(path.join(publicPath, 'index.html'));
  });
}

app.listen(port, () => {
  console.log('Server is up!');
});

import React from 'react'
import Header from './header'
import Footer from './footer'
import Switch from './config/switch'
import styled from 'styled-components'

import './App.scss'

const App = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
`

const AppContent = styled.div`
  width: 1200px;
  margin: 0 auto;
  flex-grow: 99;
  @media (max-width: 1200px) {
    width: 96vw;
  }
`

function AppComponent({history}) {
  return (
    <App>
      <AppContent>
        <Header history={history}/>
        <Switch />
      </AppContent>  
      <Footer />
    </App>

  );
}

export default AppComponent

import React from 'react'
import { Route, Switch, withRouter } from 'react-router-dom'
// Components
import Home from '../pages/home'
import About from '../pages/about'

  render () {
    return (
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
        <Route component={Home} />
      </Switch>
    )
  }
}

export default withRouter(SwitchComponent)

server.js:

build
..static
....css
....js
....media
node_modules
public
server
..server.js
src
..config
....switch.js
..imgs
..pages
..scss
..App.js
..index.js
package.json
Procfile
README.md
static.json

const path = require('path');
const sslRedirect = require('heroku-ssl-redirect').default;
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(sslRedirect());

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('build'));
  app.get('*', (req, res) => {
        res.sendFile('index.html');
  });
} else {
  const publicPath = path.join(__dirname, '..', 'public');app.use(express.static(publicPath));app.listen(port, () => {
    console.log(`Server is up on port ${port}!`);
  });
  app.get('*', (req, res) => {
    res.sendFile(path.join(publicPath, 'index.html'));
  });
}

app.listen(port, () => {
  console.log('Server is up!');
});

import React from 'react'
import Header from './header'
import Footer from './footer'
import Switch from './config/switch'
import styled from 'styled-components'

import './App.scss'

const App = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
`

const AppContent = styled.div`
  width: 1200px;
  margin: 0 auto;
  flex-grow: 99;
  @media (max-width: 1200px) {
    width: 96vw;
  }
`

function AppComponent({history}) {
  return (
    <App>
      <AppContent>
        <Header history={history}/>
        <Switch />
      </AppContent>  
      <Footer />
    </App>

  );
}

export default AppComponent

import React from 'react'
import { Route, Switch, withRouter } from 'react-router-dom'
// Components
import Home from '../pages/home'
import About from '../pages/about'

  render () {
    return (
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
        <Route component={Home} />
      </Switch>
    )
  }
}

export default withRouter(SwitchComponent)

App.js:

build
..static
....css
....js
....media
node_modules
public
server
..server.js
src
..config
....switch.js
..imgs
..pages
..scss
..App.js
..index.js
package.json
Procfile
README.md
static.json

const path = require('path');
const sslRedirect = require('heroku-ssl-redirect').default;
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(sslRedirect());

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('build'));
  app.get('*', (req, res) => {
        res.sendFile('index.html');
  });
} else {
  const publicPath = path.join(__dirname, '..', 'public');app.use(express.static(publicPath));app.listen(port, () => {
    console.log(`Server is up on port ${port}!`);
  });
  app.get('*', (req, res) => {
    res.sendFile(path.join(publicPath, 'index.html'));
  });
}

app.listen(port, () => {
  console.log('Server is up!');
});

import React from 'react'
import Header from './header'
import Footer from './footer'
import Switch from './config/switch'
import styled from 'styled-components'

import './App.scss'

const App = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
`

const AppContent = styled.div`
  width: 1200px;
  margin: 0 auto;
  flex-grow: 99;
  @media (max-width: 1200px) {
    width: 96vw;
  }
`

function AppComponent({history}) {
  return (
    <App>
      <AppContent>
        <Header history={history}/>
        <Switch />
      </AppContent>  
      <Footer />
    </App>

  );
}

export default AppComponent

import React from 'react'
import { Route, Switch, withRouter } from 'react-router-dom'
// Components
import Home from '../pages/home'
import About from '../pages/about'

  render () {
    return (
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
        <Route component={Home} />
      </Switch>
    )
  }
}

export default withRouter(SwitchComponent)

从“React”导入React
从“./头”导入头
从“./Footer”导入页脚
从“./config/Switch”导入开关
从“样式化组件”导入样式化
导入“./App.scss”
const App=styled.div`
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
高度：100vh；
`
const AppContent=styled.div`
宽度：1200px；
保证金：0自动；
弹性增长：99；
@介质（最大宽度：1200px）{
宽度：96vw；
}
`
函数AppComponent（{history}）{
返回(
);
}
导出默认AppComponent

switch.js:

build
..static
....css
....js
....media
node_modules
public
server
..server.js
src
..config
....switch.js
..imgs
..pages
..scss
..App.js
..index.js
package.json
Procfile
README.md
static.json

const path = require('path');
const sslRedirect = require('heroku-ssl-redirect').default;
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(sslRedirect());

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('build'));
  app.get('*', (req, res) => {
        res.sendFile('index.html');
  });
} else {
  const publicPath = path.join(__dirname, '..', 'public');app.use(express.static(publicPath));app.listen(port, () => {
    console.log(`Server is up on port ${port}!`);
  });
  app.get('*', (req, res) => {
    res.sendFile(path.join(publicPath, 'index.html'));
  });
}

app.listen(port, () => {
  console.log('Server is up!');
});

import React from 'react'
import Header from './header'
import Footer from './footer'
import Switch from './config/switch'
import styled from 'styled-components'

import './App.scss'

const App = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
`

const AppContent = styled.div`
  width: 1200px;
  margin: 0 auto;
  flex-grow: 99;
  @media (max-width: 1200px) {
    width: 96vw;
  }
`

function AppComponent({history}) {
  return (
    <App>
      <AppContent>
        <Header history={history}/>
        <Switch />
      </AppContent>  
      <Footer />
    </App>

  );
}

export default AppComponent

import React from 'react'
import { Route, Switch, withRouter } from 'react-router-dom'
// Components
import Home from '../pages/home'
import About from '../pages/about'

  render () {
    return (
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
        <Route component={Home} />
      </Switch>
    )
  }
}

export default withRouter(SwitchComponent)

从“React”导入React
从“react router dom”导入{Route，Switch，withRouter}
//组成部分
从“../pages/Home”导入主页
从“../pages/About”导入关于
渲染（）{
返回(
)
}
}
使用路由器导出默认值（SwitchComponent）
更改您的
应用程序。将生产环境中的处理程序设置为

app.get("/*", (req, res) => {
       res.sendFile(path.join(__dirname, "../build", "index.html"), err => {
           if (err) {
               console.log(err);
           }
       });
   });