reactjs - ReactJS Routing - Update Router, when Router and Link are in separate components

Question

I am a beginner in ReactJS. I have been experiencing problems with the code below, which I have written:

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

Problem:

I would like the render() function of Content component to change every time a user clicks on a Link from the Navigation component. How can I go about doing this?

标签： reactjsreact-router

Answer 1

你不要Navigation用路由器包装你的组件。因为只有links那些将导航到组件。另一件事是App用 main 包裹你的组件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'));

希望这对你有用。