CEP 扩展中的 react-router（例如 Premiere Pro）

Question

我正在尝试在 CEP 扩展中使用反应路由器。我的路线是这样的：

let prefix = decodeURIComponent(window.location.pathname).replace("index.html", "")

  <Router>
      <Switch>
        <Route exact path={prefix + "index.html"} component={MainComponent} />
        <Route path={prefix + "other/:otherId"} component={OtherComponent} />
      </Switch>
  </Router>

这似乎是欺骗路由器接受分机位置的唯一方法 - 因为它有 document.location 的 'file://path/to/cep/extention/index.html'。我现在面临的问题是，这仅适用于 Mac - 但始终无法匹配 windows 上的任何路径。我怀疑这是因为 windows 上的位置看起来像：'file:///C:/Program%20Files%20(x86)/Common%20Files/…be/CEP/extensions/extension-name/index.html' 而 'C:' 混淆了路由器？

有什么方法可以欺骗路由器接受这种位置 URI 吗？

Answer 1

简单的解决方案 - 使用 HashRouter 而不是 BrowserRouter。这也允许使用普通路径：

import { Route, HashRouter as Router, Switch } from 'react-router-dom'
<Router >
  <Switch>
    <Route exact path="/" component={MainComponent} />
    <Route path="/other/:otherId" component={OtherComponent} />
  </Switch>
</Router>

Answer 2

如果您使用的是 Redux，这可以通过使用 'createHashHistory' 来解决。与接受的答案一样，这允许您使用正常路径。下面是配置 redux store 的样子。

import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers/index';
import { createHashHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';

const history = createHashHistory();
const routeMiddleware = routerMiddleware(history);
const middlewares = [routeMiddleware];

const configureStore = (initialState) => {
    return createStore(
        rootReducer(history),
        initialState,
        applyMiddleware(...middlewares)
    );
}

const store = configureStore({});

export default store;

CEP 扩展中的 react-router（例如 Premiere Pro）

react-router in a CEP extension (e.g. Premiere Pro)

javascript

adobe

complex-event-processing

reactjs

react-router