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>
  </>
);

我希望在单击侧边栏组件中的“链接”之后，必须呈现showpane组件。

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，因为这似乎是您想要的。

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

1 个答案: