未能编译：'；道具'；未在ReactJS中定义no undef

我试图将一个函数传递给React路由器，但尽管进行了几次调整，它还是给了我一个错误。我尝试将函数放入render（）中，在params props之前添加了该函数，但似乎没有任何效果。如何将函数传递给路由和重定向标记之间的选择性返回

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import DogList from './DogList';
import DogDetails from './DogDetails';

class Routes extends Component {
  constructor(props) {
    super(props);
    this.getDog = this.getDog.bind(this);
  }

  getDog() {
      let name = props.match.params.name;
      let currDog = this.props.dogs.find(
          dog => dog.name.toLowerCase() === name.toLowerCase()
      );
      if(currDog != undefined) {
        return <DogDetails {...props} dog={currDog} /> ;
      } else {
        return <Redirect to="/dogs" />
      }
    }

  render() {
    
    return(
      <Switch>
        <Route exact path='/dogs' render= {() => <DogList dogs={this.props.dogs} />} />
        <Route exact path='/dogs/:name' render={(props) => {this.getDog()}} />
        <Redirect to='/dogs' />
      </Switch>
    );
  }
}

export default Routes;

import React，{Component}来自'React'；
从“react router dom”导入{交换机、路由、重定向}；
从“/DogList”导入DogList；
从“/DogDetails”导入DogDetails；
类路由扩展组件{
建造师（道具）{
超级（道具）；
this.getDog=this.getDog.bind（this）；
}
getDog（）{
让name=props.match.params.name；
让currDog=this.props.dogs.find(
dog=>dog.name.toLowerCase（）==name.toLowerCase（）
);
if（currDog！=未定义）{
返回；
}否则{
返回
}
}
render（）{
返回(
} />
{this.getDog（）}}/>
);
}
}
导出默认路径；

使用

这个.道具

不仅仅是

道具

let name = this.props.match.params.name;

---

我建议您分离组件，因为可能有太多的路由，所以您可能无法在一个组件中管理它们

无论如何，在您的情况下，请尝试将道具作为参数发送到您的函数

你应该用BrowserRouter包装你的交换机

import React, { Component } from 'react';
import { Switch, Route, Redirect, BrowserRouter as Router } from 'react-router-dom';
import DogList from './DogList';
import DogDetails from './DogDetails';

class Routes extends Component {
  constructor(props) {
    super(props);
    this.getDog = this.getDog.bind(this);
  }

  getDog(props) {
      const { dogs } = this.props;

      let name = props.match.params.name;
      let currDog = dogs.find(
          dog => dog.name.toLowerCase() === name.toLowerCase()
      );
      if(currDog != undefined) {
        return <DogDetails {...props} dog={currDog} /> ;
      } else {
        return <Redirect to="/dogs" />
      }
    }

  render() {
    const { dogs } = this.props;
    
    return(
      <Router>
      <Switch>
        <Route exact path='/dogs' render= {() => <DogList dogs={dogs} />} />
        <Route exact path='/dogs/:name' render={(props) => this.getDog(props)} />
        <Redirect to='/dogs' />
      </Switch>
      </Router>
    );
  }
}

import React，{Component}来自'React'；
从“react Router dom”导入{Switch，Route，Redirect，BrowserRouter as Router}；
从“/DogList”导入DogList；
从“/DogDetails”导入DogDetails；
类路由扩展组件{
建造师（道具）{
超级（道具）；
this.getDog=this.getDog.bind（this）；
}
getDog（道具）{
const{dogs}=this.props；
让name=props.match.params.name；
让狗来找(
dog=>dog.name.toLowerCase（）==name.toLowerCase（）
);
if（currDog！=未定义）{
返回；
}否则{
返回
}
}
render（）{
const{dogs}=this.props；
返回(
} />
this.getDog（道具）}/>
);
}
}

请记住本文档。这是一个很好的例子指南

---

这里有一个完整的例子

谢谢你的答复。。当我尝试这样做时，当你转到“/dogs/something”时，它基本上只显示一个空白页。可能无法访问dogs数组中的元素，我将其作为道具从应用程序组件传递给Routes。它给出了TypeError：当我使用this.props时，无法读取未定义的属性'params'。param@Samarth实际上，这里的问题是不同的。我已经更新了答案。@Samarth请让我知道它有效。