javascript - React 中 chrome 扩展中的组件之间切换的方式有哪些？

Question

React 中 chrome 扩展中的组件之间切换的方式有哪些？我尝试使用react-router-dom，但它不起作用。预期效果:点击链接Details打开组件Details

<Router history={history}>
   <Link to="/">Details</Link>
   <Route path='/' component={Details}/>
</Router>

谁能向我解释一下如何使用:哈希和内存历史记录？

此处代码:https://stackblitz.com/edit/react-zdhfub

class Details extends Component {
  constructor(){
    super();
  }

  render() {

    return (  
      <div>
        <p>
            Here is description
        </p>
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    super();
  }

  render() {

    return (
      <div>
        <Router history={history}>
           <Link to="/">Details</Link>
          <Route path='/' component={Details}/>
        </Router>
      </div>
    );
  }
}

Answer 1

你的问题是你的路线，

<Route path='/' component={Details}/>

当您的项目运行时，默认情况下它将从 path='/' 加载组件，因此在您的情况下，默认情况下会加载 Details 组件。

要查看实际的路由效果，请单独创建 Routes 文件，然后将该文件导入到 App 组件中

<div>
  <Router history={history}>
     <Route exact path='/' component={Dashboard} />
     <Route path='/details' component={Details} />
  </Router>
</div>

Demo