Маршрутизация в Chrome Extension, написанная в React

Question

Я хочу 2 страницы в моем расширении Chrome. Например: первая (по умолчанию) страница со списком пользователей и вторая с действиями для этого пользователя.

Я хочу отобразить вторую страницу, нажав на пользователь (ClickableListItem в моем случае). Я использую React и React Router. Здесь компонент, в котором у меня есть:

class Resents extends React.Component { 
constructor(props) { 
    super(props); 
    this.handleOnClick = this.handleOnClick.bind(this); 
} 
handleOnClick() { 
    console.log('navigate to next page'); 
    const path = '/description-view'; 
    browserHistory.push(path); 
} 
render() { 
    const ClickableListItem = clickableEnhance(ListItem); 
    return (
    <div> 
     <List> 
     <ClickableListItem 
      primaryText="Donald Trump" 
      leftAvatar={<Avatar src="img/some-guy.jpg" />} 
      rightIcon={<ImageNavigateNext />} 
      onClick={this.handleOnClick} 
     /> 
     // some code missed for simplicity 
     </List> 
    </div> 
); 
} 
} 

Я также попытался обернуть ClickableListItem в Link компонент (от react-router), но она ничего не делает.

Может быть, дело в том, что Chrome Extensions их browserHistory `t гавани ... Но я Don` T вижу ошибки в консоли ...

Что я могу сделать для маршрутизации с Реагировать?

Answer 1

Я решил эту проблему, используя отдельные маршруты вместо вложенных. Проблема была в другом месте ...

Кроме того, я создал вопрос: https://github.com/ReactTraining/react-router/issues/4309

Answer 2

Хотя вы не хотели бы использовать историю браузера (или хэша) для своего расширения, вы можете использовать историю памяти. История памяти копирует историю браузера, но сохраняет свой собственный стек истории.

import { createMemoryHistory } from 'history' 
const history = createMemoryHistory() 

Для расширения только с двумя страницами использование React Router является излишним. Было бы проще поддерживать значение в состоянии, описывающее, какую «страницу» отображать и использовать оператор switch или if/else, чтобы отображать только правильный компонент страницы.

render() { 
    let page = null 
    switch (this.state.page) { 
    case 'home': 
    page = <Home /> 
    break 
    case 'user': 
    page = <User /> 
    break 
    } 
    return page 
}