Javascript 为什么链接在react.js中不起作用？

我正在使用

react路由器

和

链接到

功能。我想在单击按钮时显示

第二个组件

，但我的代码不起作用

var路由器=反应路由器；
var DefaultRoute=Router.DefaultRoute；
var-Link=路由器.Link；
var-Route=路由器.Route；
var RouteHandler=Router.RouteHandler；
类Abc扩展了React.Component{
句柄（）{
警报（'移动到第二个组件'）
}
渲染（）{
返回（第二次移动到第二页）；
}
}
类Pqr扩展了React.Component{
渲染（）{
返回（第二次单击）
}
}
ReactDOM.render((
)，document.getElementById（'root'）；

---

第一个组件中有一个按钮。我想在单击按钮时显示第二个组件。

在第一个组件的渲染中声明

{this.props.children}

 return (<div><h1>second</h1><Link to="about"><button onClick={this.handle}>move to second page</button></Link> {this.props.children} </div>);

return（第二次移动到第二页{this.props.children}）；

检查它是否工作：

var Router = ReactRouter;

var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

class Abc extends React.Component {
  handle(){
    alert('move to second component')
  }
   render (){
     console.log('inside first render');
     return (<div><h1>second</h1><Link to="about"><button onClick={this.handle}>move to second page</button></Link>{this.props.children}</div>);

   }
}
class Pqr extends React.Component {
   render (){
     return (<div><h1>second</h1><button>click</button></div>)

   }
}

ReactDOM.render((<Router>
    <Route path="/" component={Abc}>
      <Route path="about" component={Pqr}/>  
      <Route path="*" component={NoMatch}/>
     </Route>   
  </Router>),document.getElementById('root'));

var路由器=反应路由器；
var DefaultRoute=Router.DefaultRoute；
var-Link=路由器.Link；
var-Route=路由器.Route；
var RouteHandler=Router.RouteHandler；
类Abc扩展了React.Component{
句柄（）{
警报（'移动到第二个组件'）
}
渲染（）{
console.log（'insidefirstrender'）；
return（第二次移动到第二页{this.props.children}）；
}
}
类Pqr扩展了React.Component{
渲染（）{
返回（第二次单击）
}
}
ReactDOM.render((
)，document.getElementById（'root'）；

请共享第一个组件已在code Pen中共享。您应该结束其他问题。有什么变化？是的，为什么找不到匹配的组件。.我删除了这一行，请几天前查看代码penA，我写了一个答案，请检查一下：

var Router = ReactRouter;

var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

class Abc extends React.Component {
  handle(){
    alert('move to second component')
  }
   render (){
     console.log('inside first render');
     return (<div><h1>second</h1><Link to="about"><button onClick={this.handle}>move to second page</button></Link>{this.props.children}</div>);

   }
}
class Pqr extends React.Component {
   render (){
     return (<div><h1>second</h1><button>click</button></div>)

   }
}

ReactDOM.render((<Router>
    <Route path="/" component={Abc}>
      <Route path="about" component={Pqr}/>  
      <Route path="*" component={NoMatch}/>
     </Route>   
  </Router>),document.getElementById('root'));