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

问题：

我希望每次用户单击Navigation组件中的链接时， Content组件的render()函数都会更改。 我该怎么做呢？

Answer 1

您不要用路由器包装您的Navigation组件。 只有将导航到组件的links 。 另一件事是用主BrowserRouter包装你的App组件，我猜你已经在这里作为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'));

希望这对你有用。