ReactJS Маршрутизация - обновление маршрутизатора, когда маршрутизатор и соединение находятся в отдельных компонентах

Question

Я новичок в ReactJS. У меня возникли проблемы с кодом ниже, который я написал:

class Navigation extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <button>
            <Link to = "/home">Home</Link>
          </button>
          <button>
            <Link to = "/portfolio">Portfolio</Link>
          </button>
        </Router>
      </div>;
    )
  }
}

class Content extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Router>
          <Switch>
            <Route exact path="/home">
              <h1>Home</h1>
            </Route>
            <Route path="/portfolio">
              <h1>Portfolio</h1>
            </Route>
          </Switch>
        </Router>
      </React.Fragment>;
    )
  }
}

class App extends React.Component {
  render() {
    var element = (
      <div>
        <Navigation />
        <Content />
      </div>;
    )
    return element;
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Проблема:

Мне бы хотелось, чтобы render() функция Content компонент для изменения каждый раз, когда пользователь щелкает ссылку из компонента Navigation. Как я могу go сделать это?

Answer 1

Вам не нужно оборачивать свой Navigation компонент с помощью Router. Как только links, который будет перемещаться к компоненту. И еще одна вещь - обернуть ваш App компонент основным BrowserRouter, который, я думаю, вы импортировали как Router здесь.

class Navigation extends React.Component {
  render() {
    return (
      <div>
          <button>
            <Link to = "/home">Home</Link>
          </button>
          <button>
            <Link to = "/portfolio">Portfolio</Link>
          </button>
      </div>;
    )
  }
}

class Content extends React.Component {
  render() {
    return (
      <React.Fragment>
          <Switch>
            <Route exact path="/home">
              <h1>Home</h1>
            </Route>
            <Route path="/portfolio">
              <h1>Portfolio</h1>
            </Route>
          </Switch>
      </React.Fragment>;
    )
  }
}

class App extends React.Component {
  render() {
    return (<Router>
      <Navigation />
      <Content />
    </Router>);
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Надеюсь, это работает для вас.