Express回退路由也用于静态文件
我正在尝试创build一个与前端的React和React-router协同工作的快速应用程序。 所以我正在加载index.html文件，让反应路由器处理路由的其余部分。 但是，当刷新页面上的反应路由器url，没有一个明确的路线，我显然得到了消息{无法获得…..}。 所以我添加了一个后备路线后，我所有的路线总是返回index.html时，没有路线。
所以现在我有路由到“/ api / …”，“/”和“*”，我也提供“/ public / build”和“/ app / src / static /”的静态文件。 当调用“/”时，一切正常，在调用“*”时index.html被加载，但是index.js和styles.css文件都被加载了index.html的内容。 所以我的浏览器得到一个styles.css文件，里面有一堆html，而当使用“/”path时，.js和.css文件可以正确加载。
所以导航到“/”加载所有的静态文件正确的索引页面。 然后，我可以使用我的react-router-dom NavLink导航到不同的视图，而无需向服务器发送请求。 但是当我尝试直接加载任何react-router-dom页面时，我得到了我的index.html，但是我的index.js与index.html具有相同的内容，styles.css
我的代码：
const app = express(); app.use(bodyParser.urlencoded({ extended: true})); app.use(bodyParser.json()); passportConfig(passport); app.use(passport.initialize()); app.use(passport.session()); app.use('/api/user', userRoutes); app.use('/api', championRoutes); app.use('/public/build', express.static(__dirname + '/public/ReactApp/build')); app.use("/app/src/static/image", express.static(__dirname + '/public/ReactApp/src/static/image')); app.use("/app/src/static/style", express.static(__dirname + '/public/ReactApp/src/static/style')); app.get('/', (req, res) => { res.sendFile(path.resolve(__dirname, '..', 'index.html')); }); app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, '..', 'index.html')); }); app.listen(8080, () => { console.log('started on port 8080'); }); userRoutes和championRoutesvariables都包含一个有几个路由集的express.Router对象。
编辑：
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link href="app/src/static/style/styles.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div id="app"></div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="public/build/index.js"></script> </body> </html>
<script src="public/build/index.js"></script>
这意味着该位置相对于当前path，即如果您位于http://somedomain.com/page2的path将为http://somedomain.com/page2/public/build/index.js （在你的情况下将提供index.html文件）。
为了从你的url的底部指定一个相对path，用/来启动path：
<script src="/public/build/index.js"></script>