ReactJS路由-当路由器和链路位于单独的组件中时，更新路由器

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

类导航扩展了React.Component{
render（）{
返回(
家
文件夹
;
)
}
}
类内容扩展了React.Component{
render（）{
返回(
家
文件夹
;
)
}
}
类应用程序扩展了React.Component{
render（）{
变量元素=(
;
)
返回元素；
}
}
ReactDOM.render（，document.getElementById（'root'））；

问题：

---

我希望

Content

组件的

render（）。我该怎么做呢？
您不需要用路由器包装您的
导航组件。因为只有
链接将导航到组件。另一件事是用main
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'));

类导航扩展了React.Component{
render（）{
返回(
家
文件夹
;
)
}
}
类内容扩展了React.Component{
render（）{
返回(
家
文件夹
;
)
}
}
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

希望这对你有用