React-router в расширении CEP (например, Premiere Pro)
я пытаюсь использовать реактивный маршрутизатор в расширении 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 местоположения?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Простое решение — используйте 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>
Если вы используете Redux, это можно решить с помощью createHashHistory. Так же, как и принятый ответ, это позволяет вам использовать обычные пути. Вот как может выглядеть настройка вашего хранилища избыточности.
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;
поэтому я смог обойти маршрут, никогда не совпадающий с путем MainComponent, просто полностью отбросив элемент «путь». Остается вопрос: как мне получить соответствующий относительный путь «otherComponent»?