Есть ли способ использовать маршрутизацию в двух отдельных компонентах в 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>
  </>
);

Я ожидаю, что после нажатия ссылки в компоненте боковой панели должен быть отображен компонент 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>
  </>
);

Iтакже рекомендовал бы взглянуть на пример боковой панели ReactRouter Docsacttraining , так как это то, к чему вы, похоже, стремитесь.