javascript - 用 React 编写的 Chrome 扩展中的路由

Question

我想在我的 Chrome 扩展程序中添加 2 个页面。例如:第一个(默认)页面包含用户列表，第二个页面包含针对该用户的操作。

我想通过点击用户来显示第二页(在我的例子中是ClickableListItem)。我使用 React 和 React 路由器。这是我拥有的组件:

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

我知道这篇文章很旧。不过，我会在这里留下我的答案，以防万一有人仍在寻找它并希望快速得到答案来修复他们现有的路由器。

在我的例子中，我只是从 BrowserRouter 切换到 MemoryRouter。无需额外的 memory 包，它就像魅力一样工作!

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

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

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