Рендеринг HTML-файлов в приложении Express / React / React Router

Question

Я теряю голову над этим, поэтому вот оно.

У меня есть классическое приложение, использующее Express на серверной части, React и React на передней панели.

В моем приложении есть текстовые редакторы, где я могу редактировать код.В какой-то момент я хочу просмотреть результаты в новой вкладке.Итак, эта новая вкладка будет отображать статический файл.

Я могу получить html-контент и отобразить его на новой вкладке, но HTML-код отображается внутри разметки реагирования моего приложения, поэтому такие вещи, как импортированные файлыв не загружены.

Кажется, что мы не можем использовать протокол file: //, поэтому я застрял.Я не совсем знаю, как использовать res.renderFile из express для переопределения маршрутов реакции-маршрутизатора, которые я определил.

Я также пытался использовать, но он тоже не работал.

Наконец, я использовал window.open (filePath, "_blank"), который прекрасно работает, ожидая, что я получу URL-адрес localhost:3000/pathFile.Удаление localhost: 3000 будет творить чудеса, но я не могу этого сделать.

Это мой маршрутизатор.Компонент Preview извлекает содержимое файла, который я хочу предварительно просмотреть, но он не работает.

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-файл был правильно загружен на новой вкладке, полностью отделенный от реакции.приложение.Я предполагаю, что мне нужно обойти реактивный маршрутизатор.Любые советы?