Reactjs 无法读取未定义的+；奇怪的网址

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

0]链接有我不想要的结束字符串：

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

每次我刷新页面时，“？”之后的所有字符都会更改

1] 当我点击链接时，总是会出现以下错误：

Uncaught TypeError: Cannot read property 'pushState' of undefined

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

代码非常简单：

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

1从“React”导入React；
2从“react dom”导入ReactDOM；
3从“反应路由器”导入{路由器、路由、链路}；
4.
5从“./标题菜单”导入标题菜单；
6.
7从“./App”导入应用程序；
8从“/App”导入约会；
9从“/App”导入客户端；
10
11.render(
12
13
14
15
16
17
18
19
20             ,
21 document.getElementById（'app'））

标题菜单：

  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;

1从“React”导入React；
2从“react dom”导入ReactDOM；
3从“反应路由器”导入{路由器、路由、链路}；
4.
5班长菜单扩展反应组件{
6渲染（）{
7返回(
8.
9
10
11
18
19
20

21

22
客户
23
任命
24
25
26
27
28         );
29     }
30 }
31
32导出默认头菜单；

应用程序/客户端/约会都类似于：

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

20 const Clients=React.createClass({
21 render（）{
22返回(
23个客户
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

1从“React”导入React；
2从“react dom”导入ReactDOM；
3.
4从“./标题菜单”导入标题菜单；
5.
6类应用程序扩展了React.Component{
7渲染（）{
8返回(
9
10
11
12{这个.道具.儿童}
13
14
15         );
16     }
17 }
18
19类。组件{
20 render（）{
21返回(
22
23名获委任人士
24
25         );
26     }
27 }
28
29类客户端扩展React.Component{
30 render（）{
31返回(
32个客户
33         );
34     }
35 }
36
37导出默认应用程序

我认为你需要将你的Header菜单放在你的应用程序组件中。路由器必须是最外层的组件，才能查看历史记录

更新

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

更新

---

如果你想做我认为你是。。。在你的应用程序路径下添加

。

谢谢，你说得对！现在的问题是，即使应用程序组件上有{this.props.children}，链接也不会显示任何内容，只会更改url。。！在第一篇文章中添加了appjs文件！您要在菜单的第22行和第23行显示什么url：链接到=“/clients”和“约会”。两个都不显示！有关URL末尾的查询字符串，请参阅。