PROSAGA码农传奇-react-将'react-router'迁移到'react-router-dom'（v4）

<div class =“post-text”itemprop =“text”>
  <P>
    看完视频后，你可能想要这样的东西。起初这不是那么容易理解，但在看到其中一些之后你会消化它。首先你渲染你的
     <code>
      Layout
    </code>
     一个人
     <code>
      Route
    </code>
    。然后在这个顶级路线中，您使用其他
     <code>
      Route
    </code>
    设置组件。
  </p>
  <P>
    我们经常使用
     <code>
      exact
    </code>
     像一个顶级根的道具
     <code>
      /
    </code>
    。如果您没有像这样设置您的应用程序，例如您的所有路线都在您的顶部
     <code>
      Router
    </code>
     配置，然后使用类似的路由
     <code>
      /featured
    </code>
     我们必须拥有
     <code>
      exact
    </code>
     支柱。如果我们不使用它
     <code>
      Router
    </code>
     总是打
     <code>
      /
    </code>
     路径，我们总是看到顶级组件。
  </p>
  <P>
    但是，在您的情况下，您希望在顶级组件中路由其他组件。所以，我们放弃了
     <code>
      exact
    </code>
     道具在这里。
  </p>
  <P>
    你也可以使用
     <code>
      push
    </code>
     改变历史。
  </p>
  <P>
    的<strong>
      更新
    </强>
  </p>
  <P>
    在想到名为“精选”的导航按钮后，我想你想要的
     <code>
      Featured
    </code>
     组件在此处呈现为默认组件。当再次按下按钮时，您将返回
     <code>
      Featured
    </code>
     一。我根据这个改变了代码。在这个版本中，我们添加一个
     <code>
      /
    </code>
     路线
     <code>
      Layout
    </code>
     并指出它
     <code>
      Featured
    </code>
    。所以，当我们来到这里时它会被渲染出来。但是，我们使用
     <code>
      exact
    </code>
     支持这里，因为我们也想要“/ featured”，“/ archives”和“/ settings”等路线。
  </p>
   <pre>
    <code>
      export default class Layout extends React.Component {
  navigate = () => this.props.history.push("/");

render() {
    return (
      <div>
        <h1>Welcome</h1>
        <Link to="/featured">Featured</Link>
        <Link to="/archives">Archives</Link>
        <Link to="/settings">Settings</Link>
        <br />
        <button onClick={this.navigate}>Featured</button>
        <Route exact path="/" component={Featured} />
        <Route path="/featured" component={Featured} />
        <Route path="/archives" component={Archives} />
        <Route path="/settings" component={Settings} />
        <div>
        Some other info.
        </div>
      </div>
    );
  }
}

const app = document.getElementById('root');

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/" component={Layout} />
    </Switch>
  </Router>,
  app);

</code>
  </pre>
</DIV>