Блог

Главная - Вопросы по программированию - реагирующий маршрутизатор в расширении CEP (например, Premiere Pro)

реагирующий маршрутизатор в расширении CEP (например, Premiere Pro)

#javascript #reactjs #react-router #adobe #complex-event-processing

#javascript #reactjs #реагировать-маршрутизатор #саманный #комплексная обработка событий

Вопрос:

я пытаюсь использовать react-маршрутизатор в расширении 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 Files (x86) /Common Files/…be/CEP/extensions/extension-name/index.html «а буква «С» сбивает маршрутизатор с толку?

есть ли какой-нибудь способ обмануть маршрутизатор, чтобы он принимал URI такого местоположения?

Комментарии:

1. итак, я смог обойти маршрут, который никогда не совпадал с путем MainComponent, просто полностью отбросив элемент «path». Оставшаяся проблема — как мне сопоставить относительный путь «otherComponent»?

Ответ №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>

Ответ №2:

Если вы используете Redux, это можно решить с помощью ‘createHashHistory’. Так же, как и принятый ответ, это позволяет вам использовать обычные пути. Вот как это может выглядеть для настройки вашего хранилища redux.

 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;
Метки: ,