有没有办法在 Reactjs 的两个独立组件中使用路由？

Question

我正在尝试在两个不同的组件中使用路由。首先是 SIDEBAR 组件，其中有链接....和一个动态 SHOWPANE 组件，其他组件将根据侧边栏提供的路由呈现。

这是我尝试过的...

//The App component
class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="app-con">
          <Sidebar />
          <Showpane />
        </div>
      </div>
    );
  }
}

//The sidebar component
const sidebar = props => (
  <>
    <div className="sb-con">
      <BrowserRouter>
        <div>
          <Link to="/" className="navs">
            My Account
          </Link>
          <Link to="/history" className="navs">
            Account History
          </Link>
          <Link to="/settings" className="navs">
            Account Settings
          </Link>
          <Link to="/" className="navs">
            Log out
          </Link>
        </div>
      </BrowserRouter>
    </div>
  </>
);

//The showpane component
const showpane = props => (
  <>
    <div className="sp-con">
      <BrowserRouter>
        <div>
          <Route path="/" component={Account} exact />
          <Route path="/history" component={Acchistory} />
          <Route path="/settings" component={Accset} />
        </div>
      </BrowserRouter>
    </div>
  </>
);

我希望在侧边栏组件中单击链接后，必须呈现显示窗格组件。

Answer 1

BrowserRouter 是您的应用程序路由器，因此应该位于应用程序层次结构的顶部。

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <div className="app-con">
            <Sidebar />
            <Showpane />
          </div>
        </div>
      </Router>
    );
  }
}

您的显示窗格将如下所示：

const showpane = props => (
  <>
    <div className="sp-con">
      <div>
        <Route path="/" component={Account} exact />
        <Route path="/history" component={Acchistory} />
        <Route path="/settings" component={Accset} />
      </div>
    </div>
  </>
);

我还建议查看侧边栏示例 reacttraining's ReactRouter Docs，因为这就是您想要的。