React-Router如何工作？

Question

我正在使用express并尝试实现部分反应作为一种演示。但是一个反应组件在另一个页面上单独渲染，而其余部分在一个页面上渲染。我认为反应路由器是完美的，因为我可以将页面路由到组件，因此只有一个组件将在该页面上呈现。

Index.jsx

import { Router, Route, Redirect } from 'react-router-dom';

var Projects = React.createClass({
  render: function() {
    return (
      <div className ="project-page">
       <Change />
       <Mortgage />
       <Todo />
       <Astro />
     </div>
   );
  }
});
var Landing = React.createClass({
  render: function() {
    return (
      <div className ="landing-page">
        <App />
      </div>
    );
  }
});

var MyApp = React.createClass ({
render: function(){
  return(
   <Router history={history}>
    <Route path="/projects" component={Projects} />
   <Route path="/" component={Landing} />
   </Router>
  );
 }
});
ReactDOM.render(<MyApp />, document.getElementById('output'))

export default index;