Javascript 用React编写的Chrome扩展中的路由

我想在我的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>
  );
}
}

类重新发送扩展的React.Component{
建造师（道具）{
超级（道具）；
this.handleOnClick=this.handleOnClick.bind（this）；
}
handleOnClick（）{
log（“导航到下一页”）；
常量路径='/description视图'；
browserHistory.push（路径）；
}
render（）{
常量ClickableListItem=clickableEnhance（ListItem）；
返回(
//为了简单起见，遗漏了一些代码
);
}
}

我还尝试将

可点击列表项

包装到

链接

组件中（来自

反应路由器

），但它没有任何作用

也许问题是Chrome扩展没有他们的

browserHistory

。。。但我在控制台中没有看到任何错误

---

如何使用React进行路由选择

虽然您不想对扩展使用浏览器（或哈希）历史记录，但可以使用内存历史记录。内存历史记录复制浏览器历史记录，但保留自己的历史记录堆栈

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

对于一个只有两个页面的扩展，使用React路由器是过分的。将一个值保持在描述要呈现哪个“页面”的状态，并使用开关或if/else语句仅呈现正确的页面组件会更简单

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

render（）{
设page=null
开关（this.state.page）{
“家”案例：
第页=
打破
案例“用户”：
第页=
打破
}
返回页
}

虽然您不想对扩展使用浏览器（或哈希）历史记录，但可以使用内存历史记录。内存历史记录复制浏览器历史记录，但保留自己的历史记录堆栈

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

对于一个只有两个页面的扩展，使用React路由器是过分的。将一个值保持在描述要呈现哪个“页面”的状态，并使用开关或if/else语句仅呈现正确的页面组件会更简单

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

render（）{
设page=null
开关（this.state.page）{
“家”案例：
第页=
打破
案例“用户”：
第页=
打破
}
返回页
}

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

---

此外，我还创建了一个问题：

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

---

此外，我还发表了一篇文章：

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

就我而言，我只需从

BrowserRouter

切换到

MemoryRouter

。它就像魅力一样，不需要额外的

内存

包

从'react Router dom'导入{MemoryRouter as Router}；
ReactDOM.render(
,
document.querySelector（“#root”）
);

---

你可以尝试其他适合你的方法。我知道这篇文章很老了。不过，我会把我的答案留在这里，以防有人仍然在寻找它，并希望得到一个快速的答案，以修复他们现有的路由器

就我而言，我只需从

BrowserRouter

切换到

MemoryRouter

。它就像魅力一样，不需要额外的

内存

包

从'react Router dom'导入{MemoryRouter as Router}；
ReactDOM.render(
,
document.querySelector（“#root”）
);

---

---

您可以尝试其他适合您的方法，这是我刚刚发现的一个非常轻量级的解决方案。我刚刚尝试过它-简单且性能良好：

react chrome extension router

这是我刚刚发现的一个非常轻量级的解决方案。我刚刚尝试过它-简单而有效：

react chrome extension router

handleOnClick

当我点击项目时，我可以看到控制台消息确实，工具栏弹出窗口无法导航。只需显示/隐藏DOM元素。还要确保查看正确的控制台（扩展有3种类型）。@wOxxOm否，导航是可能的！使用react router，或者像@Paul回答的那样，使用

createMemoryHistory

我使用了

navigation

的经典含义，而不是react-specific（它只是按照我的建议通过切换/添加DOM元素来模拟导航）。

handleOnClick

在我单击项目时调用，我确实可以看到控制台消息，无法导航工具栏弹出窗口。只需显示/隐藏DOM元素。还要确保查看正确的控制台（扩展有3种类型）。@wOxxOm否，导航是可能的！使用react router，或者像@Paul回答的那样，使用

createMemoryHistory

我使用了

navigation

的经典含义，而不是react-specific（它只是按照我的建议通过切换/添加DOM元素来模拟导航）。我稍后会尝试！这是标准做法吗？在Chrome扩展中进行路由应该是很常见的，我稍后会尝试！这是标准做法吗？在Chrome扩展中进行路由应该是很常见的，可惜维护人员锁定了这个问题-/可惜维修人员锁定了问题：-/嘿，斯奈克，你能解释一下你如何在没有路径的情况下切换到不同的路径吗？@joshmillgate“切换到没有路径的不同路径”是什么意思？你是说没有路径的

？我不认为那是一件事。或者你的意思是在没有

的情况下切换到不同的路线？如果是这种情况，您可以使用

的渲染道具

历史

属性，或者只使用

。如果您愿意，请随时与我联系。@Snek这是可行的，但是“返回”操作不起作用：/您知道如何处理吗？嘿，Snek，您能解释一下如何切换到d吗