Question

我对此不知所措，所以在这里。

我有一个经典的应用程序，其后端使用Express，前端使用React和React路由器。

我的应用程序具有文本编辑器，可以在其中编辑代码。有一次，我想在新选项卡中预览结果。因此，这个新标签会显示一个静态文件。

我可以获取html内容并将其显示在新选项卡中，但是HTML显示在我的应用程序的react标记内，因此不会加载诸如导入到其中的文件之类的东西。

似乎我们不能使用file：//协议，所以我被困住了。我不太了解如何使用express中的res.renderFile来覆盖我定义的react-router路由。

我也尝试使用它，但是它也不起作用。

最后，我使用window.open（filePath，“ _blank”）效果很好，希望我以URL localhost:3000/pathFile的形式获得。删除localhost：3000会产生奇迹，但我无法做到这一点。

这是我的路由器。预览组件会检索我要预览的文件的内容，但是不起作用。


const App = () => (
    <Router>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/home" component={Home} />
            <PrivateRoute exact path="/protected" component={Users} />
            <Route exact path="/users" component={Users} />
            <Route exact path="/signup" component={SignUp} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/logout" component={Logout} />
            <Route path="*" component={Preview} />
            <Route component={NoMatch} />
        </Switch>
    </Router>
)

我想将html文件正确加载到新标签上，并与react应用程序完全分开。我认为我需要绕过react-router。有提示吗？

在Express / React / React Router应用程序中呈现html文件

0 个答案: