是否有Reactjs使用路由在两个独立的部件的方法吗?

问题描述 投票:0回答:1

我想在两个不同的组件使用的路由。第一是侧边栏部件,其中链路是有....并且其中其他部件将基于由边栏提供的路线被呈现动态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组件必须进行渲染。

reactjs react-router-dom
1个回答
0
投票

BrowserRouter是您的应用程序的路由器,因此应坐在你的应用程序的层次结构的顶部。

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

然后,您showpane会是这样的:

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期待,因为这是你仿佛是想为。

© www.soinside.com 2019 - 2024. All rights reserved.