Question

我正在创建Web应用程序。我现在尝试对现有的js文件使用react-router。但是，仅使用<Router>会给我这个错误：-

react-dom.development.js：11536未捕获的TypeError：无法读取属性“位置”未定义

var lists2 = this.state.list2;
var aname = this.state.article.name;
var date = this.state.article.date;
var lists3 = this.state.listrec;

return (
  <div className = 'row'>
    <div id='recentsbar' className='col-md-3'>
      <div className = 'row'>
        <div className='col-md-9'>
          <div>
            <div style={{display: this.state.hide2}}>
              <h2> 
                <b> Recents </b>
              </h2>
            <div className="lds-ellipsis" style={{display: this.state.load2}} >
            <div></div><div></div><div></div><div></div></div>
            <div id='subl'>
              {lists3.map((number) =>
                  <Item3 name={number} show={this.rec.bind(this)} />
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div className='col-md-8'>
    <div style={{display: this.state.hide}}> 
      <h1 style={{marginLeft: 6+'em'}}>
        <b> Subjects List </b>
      </h1>
    <div className='row'>
      <div className='col-md-6'>
        <ul style={{marginTop: 1+'em'}} /*className="list-group"*/ > 
          <div className="lds-ellipsis" style={{display: this.state.load}}>
          <div></div><div></div><div></div><div></div></div>
          {lists.map((number) =>
              <Item name={number} hide={this.hide.bind(this)}/>
          )}
        </ul>
      </div>
    </div>
  </div>

  <div className='col-md-8'>
    <div style={{display: this.state.show}}> 
      <h1 style={{ marginLeft: 6+'em'}}> 
        <b> {this.state.selsub} </b>
      </h1>
      <div className='row'>
        <div className='col-md-auto' style={{ marginLeft: 6+'em'}}>
          <ul style={{marginTop: 1+'em'}} className="list-group art" > 
            <div className="lds-ellipsis" style={{display: this.state.load}} >
              <div></div><div></div><div></div><div></div></div>
              {lists2.map((number) =>
                  <Item2 name={number} hide2={this.hide2.bind(this)}/>

              )}
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div style={{display: this.state.showarticle }}> 
    <div className="lds-ellipsis" style={{display: this.state.load}>
      <div></div><div></div><div></div><div></div></div>
      <div className='arthead'> {aname} </div>  
        <div style={{float: 'right', opacity: 0.5 }}> Updated on: {date} </div>
          <div style={{marginLeft: 1+'em' , lineHeight: 2 + 'em', marginTop: 4+'em'}} 
            dangerouslySetInnerHTML={{ __html: this.state.article.body }}>
          </div>
        </div>
      </div>
    <Router></Router>
  </div>
  );
}

包含<Router></Router>会给我这个错误。

我正在使用CDN script。

Answer 1

这种方式不起作用。全局变量在JSX内部不会神奇地可见。 阅读文档 =>安装软件包（npm或yarn，“ react-router-dom”）。

<Router>是一种顶级（根，应用程序级别）组件-它嵌入了更详细的组件。简而言之：

const App = () => (
  <Router>
    <Route path="/" component={<YourMainComponent />}>
    <Route path="/sth" component={<YourSthComponent />}>
  </Router>
)

然后在组件中将具有路线道具（props.match）。

Answer 2

import {BrowserRouter as Router, Route} from "react-router-dom"; 除了更新和完成您的工作没有用之外，不会出现该位置错误会很有用，它会显示更多错误。

Answer 3

还可以尝试

import {BrowserRouter as Router, Route} from "react-router-dom";

（BrowserRouter）而不是导入路由器

使用<router>的React-Router给出：-无法读取未定义的属性'location'

3 个答案: