无法读取未定义的属性 pushState + 奇怪的 url

Question

我正在尝试在我的 react 应用程序中实现路由，但有两个问题：

0] 链接有一个我不想要的结尾字符串：

http://localhost:3333/#/clients?_k=ssyjyn

每次我刷新页面时'?_'更改后的所有字符。

1] 当我点击一个链接时，我总是得到这个错误：

Uncaught TypeError: Cannot read property 'pushState' of undefined

react-router 存储库中的示例对我有用，但是当我在我的应用程序中复制完全相同的代码时，即使我没有收到任何错误，它们也会停止工作：只要我点击一个链接，什么都不会发生。

代码很简单：

  1 import React from 'react';
  2 import ReactDOM from 'react-dom';
  3 import {Router, Route, Link} from 'react-router';
  4
  5 import HeaderMenu from './Header_menu';
  6
  7 import App from './App';
  8 import Appointments from './App';
  9 import Clients from './App';
 10
 11 ReactDOM.render(
 12             <div>
 13                 <HeaderMenu />
 14                 <Router>
 15                     <Route path="/" component={App}>
 16                         <Route path="appointments" component={Appointments} />
 17                         <Route path="clients" component={Clients} />
 18                     </Route>
 19                 </Router>
 20             </div>,
 21         document.getElementById('app'))

Header_menu：

  1 import React from 'react';
  2 import ReactDOM from 'react-dom';
  3 import {Router, Route, Link} from 'react-router';
  4
  5 class HeaderMenu extends React.Component{
  6     render(){
  7         return(
  8             <div className="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
  9                 <div className="container">
 10                     <div className="navbar-header">
 11                         <a className="navbar-toggle">·
 12                             <span className="sr-only">Toggle navigation</span>
 13                             <span className="icon-bar"></span>
 14                             <span className="icon-bar"></span>
 15                             <span className="icon-bar"></span>
 16                         </a>
 17                         <a className="navbar-brand" href="#"></a>
 18                     </div>
 19                     <div id="slidemenu">
 20                         <ul className="nav navbar-nav">
 21                             <li className="active"><a href="#">Appointments</a></li>
 22                             <li><Link to="/clients">Clients</Link></li>
 23                             <li><Link to="/appointments">Appointments</Link></li>
 24                         </ul>
 25                     </div>
 26                 </div>
 27             </div>
 28         );
 29     }
 30 }
 31
 32 export default HeaderMenu;

App/Clients/Appointments 都是这样的：

 20 const Clients = React.createClass({
 21     render(){
 22         return(
 23             <div>Clients</div>
 24         );
 25     }
 26 });

会是什么问题？

编辑：添加 app.js 文件代码

  1 import React from 'react';
  2 import ReactDOM from 'react-dom';
  3
  4 import HeaderMenu from './Header_menu';
  5
  6 class App extends React.Component{
  7     render(){
  8         return(
  9             <div>
 10                 <HeaderMenu />
 11                 <div className='container' id='page-content'>
 12                    {this.props.children}
 13                 </div>
 14             </div>
 15         );
 16     }
 17 }
 18
 19 class Appointments extends React.Component{
 20     render(){
 21         return(
 22             <div className='col-xs-12'>
 23             appointemtns
 24             </div>
 25         );
 26     }
 27 }
 28
 29 class Clients extends React.Component{
 30     render(){
 31         return(
 32             <div>Clients</div>
 33         );
 34     }
 35 }
 36
 37 export default App

Answer 1

我认为您需要将 HeaderMenu 放在 App 组件中。路由器需要成为最外层的组件才能看到历史。

更新

您可能需要向应用添加索引路由以显示或重定向到约会组件/url。如果您可以粘贴应用代码，我们可以帮助验证/澄清。

更新

如果你想做我认为你应该做的事...在你的 App 路由下添加<IndexRoute component={Appointments}/>。