Question

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

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

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

每次我刷新页面之后的所有字符？＆＃39;？_＆＃39;变化

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组件中。路由器需要成为历史记录的最外层组件。

<强> 更新

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

<强> 更新

如果您尝试按我认为的那样做...在您的应用路线下添加<IndexRoute component={Appointments}/>。

无法读取属性pushState的undefined + strange url

1 个答案: