用React编写的Chrome扩展程序中的路由

Question

我的Chrome扩展程序中有2个页面.例如:第一个(默认)页面包含用户列表,第二个页面包含此用户的操作.

我想通过点击用户显示第二页(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扩展程序没有他们的browserHistory...但我没有看到控制台中的任何错误...

使用React进行路由可以做些什么？

Answer 1

虽然您不希望为扩展使用浏览器(或哈希)历史记录,但您可以使用内存历史记录.内存历史记录复制浏览器历史记录,但维护自己的历史记录堆栈.

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
}

Answer 2

我知道这个帖子很旧。尽管如此，我还是将我的答案留在这里，以防万一有人仍在寻找它并想要快速回答来修复他们现有的路由器。

就我而言，我只是从 切换BrowserRouter到MemoryRouter。它就像魅力一样，无需额外的memory包装！

import { MemoryRouter as Router } from 'react-router-dom';

ReactDOM.render(
    <React.StrictMode>
        <Router>
            <OptionsComponent />
        </Router>
    </React.StrictMode>,
    document.querySelector('#root')
);

您可以在ReactRouter 文档中尝试其他适合您的方法

Answer 3

我通过使用单个路由而不是嵌套路由解决了这个问题。问题出在另一个地方...

另外，我创建了一个问题：https ://github.com/ReactTraining/react-router/issues/4309