Question

我正在尝试创建一个与前端的React和React-router一起使用的快速应用程序。所以我正在加载index.html文件，让路由器处理其余的路由。但是当使用没有快速路由的反应路由器URL的页面刷新时，我显然得到消息{无法获取.....}。所以我在所有路线之后添加了一个后备路线，以便在没有路线时始终返回index.html。

所以现在我有“/ api / ...”，“/”和“*”的路由，我还提供来自“/ public / build”和“/ app / src / static /”的静态文件。当调用“/”时一切都很好，当调用“*”时，index.html被加载，但index.js和styles.css文件都加载了index.html的内容。所以我的浏览器获得了一个带有一堆html的styles.css文件，而当使用“/”路由时，.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和championRoutes变量都包含一个设置了几条路径的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>

Answer 1

<script src="public/build/index.js"></script>

这意味着该位置相对于当前路径，即，如果您位于http://somedomain.com/page2，index.js的路径将为http://somedomain.com/page2/public/build/index.js（在您的情况下将提供此服务） index.html文件。）

要指定来自网址底部的相对路径，请使用/启动路径：

<script src="/public/build/index.js"></script>

Express后备路由也用于静态文件

1 个答案: