Reactjs React router相同的url不重新安装，试图找出组件将接收Props

我正在开发我的第一个React应用程序，在路由方面遇到了一些问题，只是想寻求一些指导。我发现这对于很多人来说都是一个特殊的问题，但是很难找到其他答案

从我对其他答案的了解可以看出，人们正在为特定路径分配密钥，并检查组件willreceiveprops（nextrops）中的密钥。我有点明白这一点，虽然不确定从那里重新渲染/装载

我只是尝试在URL

/catalog/genre/：genre

和

/catalog/genres

之间转换。对于混乱的代码，我提前表示歉意，只是想让它正常工作

App.js包含主要路线，尤其是针对此问题：

Genres.js：

import React, { Component } from 'react';
import {
  Link,
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';

class Genre extends Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    fetch('http://localhost:3000/catalog/genre/58eacca74a0d2c105c68fbe9')
    .then(response => response.json())
    .then(json => {
      this.setState({
        data: json.genre_books
      });
    });
  }

  componentWillReceiveProps(newProps) {
    console.log(newProps.params);
  }

  render() {
    return (
      <div>
        <div>
          Genre:
          <label>
            <ul>
              {
                this.state.data.map((piece) =>
                  <Link key={piece._id} to={`${piece.url}`}>
                    <li>
                      {piece.title}
                    </li>
                  </Link>
                )
              }
            </ul>
          </label>
        </div>
      </div>
    );
  }
}

class AllGenres extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    fetch('http://localhost:3000/catalog/genres')
    .then(response => response.json())
    .then(json => {
      this.setState({
        data: json.genres_list
      });
    });
  }

  render() {
    return (
      <div>
        All Genres:
        <label>
          <ul>
            {
              this.state.data.map((piece) =>
                <Link key={piece._id} to={`${piece.url}`}>
                  <li>
                    {piece.name}
                  </li>
                </Link>
              )
            }
          </ul>
        </label>
      </div>
    );
  }
}

class Genres extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    fetch('http://localhost:3000/catalog/genres')
    .then(response => response.json())
    .then(json => {
      this.setState({
        data: json.genres_list
      });
    });
  }

  render() {
    return (
      <div>
        <Router>
          <div>
            <Route path="/catalog/genre/:genre" render={() => (
              <Genre testKey='1'/>
            )}/>
            <Route exact path="/catalog/genres" render={() => (
              <AllGenres testKey='2' />
            )}/>
          </div>
        </Router>
      </div>
    );
  }
}

export default Genres;

import React，{Component}来自'React'；
进口{
链接
BrowserRouter作为路由器，
路线,，
}从“反应路由器dom”；
类类型扩展组件{
建造师（道具）{
超级（道具）；
控制台日志（道具）；
此.state={
数据：[]，
};
}
componentDidMount（）{
取（'http://localhost:3000/catalog/genre/58eacca74a0d2c105c68fbe9')
.then（response=>response.json（））
。然后（json=>{
这是我的国家({
数据：json.genre_图书
});
});
}
组件将接收道具（新道具）{
console.log（newProps.params）；
}
render（）{
返回(
体裁：

{
this.state.data.map（（块）=>

{作品名称}

)
}

);
}
}
类AllGenes扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
}
}
componentDidMount（）{
取（'http://localhost:3000/catalog/genres')
.then（response=>response.json（））
。然后（json=>{
这是我的国家({
数据：json.genres\u列表
});
});
}
render（）{
返回(
所有类型：

{
this.state.data.map（（块）=>

{piece.name}

)
}

);
}
}
类类型扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
}
}
componentDidMount（）{
取（'http://localhost:3000/catalog/genres')
.then（response=>response.json（））
。然后（json=>{
这是我的国家({
数据：json.genres\u列表
});
});
}
render（）{
返回(
(
)}/>
(
)}/>
);
}
}
导出默认类型；

对于回到这个问题上来的人，虽然componentWillReceiveProps（nextProps）在其他情况下很有用，但我通过以下方法找到了解决这个问题的方法

现在我可以基于URL参数

genreId

进行渲染

代码如下：

App.js导航组件

class Nav extends Component {
  constructor(props){
    super(props);

    this.state = {
      tap: 0,
    }

  }

  render() {
    return (
      <div >
        <Router>
            <div style={styles.mainContent}>
              <Drawer open="TRUE" title="My App">
                <MenuItem primaryText="Home" containerElement={<Link to="/catalog/home" />} />
                <MenuItem primaryText="All books" containerElement={<Link to="/catalog/books" />} />
                <MenuItem primaryText="All authors" containerElement={<Link to="/catalog/authors" />} />
                <MenuItem primaryText="All genres" containerElement={<Link to="/catalog/genres" />} />
                <MenuItem primaryText="All book-instances" containerElement={<Link to="/catalog/bookinstances" />} />
                <hr></hr>
                <MenuItem primaryText="Create new author" containerElement={<Link to="/catalog/author/create" />} />
                <MenuItem primaryText="Create new genre" containerElement={<Link to="/catalog/genre/create" />} />
                <MenuItem primaryText="Create new book" containerElement={<Link to="/catalog/book/create" />} />
                <MenuItem primaryText="Create new book instance (copy)" containerElement={<Link to="/catalog/bookinstance/create" />} />
                <hr></hr>
                <MenuItem primaryText="About" containerElement={<Link to="/about" />} />
                <MenuItem primaryText="Topics" containerElement={<Link to="/topics" />} />
              </Drawer>

              <Route path="/catalog/home" component={Home}/>
              <Route path="/catalog/books" component={Books}/>
              <Route path="/catalog/authors" component={Authors}/>
              <Route path="/catalog/genres" component={Genres}/>
              <Route path="/catalog/bookInstances" component={BookInstances}/>
              <Route path="/about" component={About}/>
              <Route path="/topics" component={Topics}/>
            </div>
        </Router>
      </div>
    );
  }
}

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom';

class GenreList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    fetch('http://localhost:3000/catalog/genres')
    .then(response => response.json())
    .then(json => {
      this.setState({
        data: json.genres_list
      });
    });

  }

  render() {
    return (
      <div>
        All Genres:
        <label>
          <ul>
            {
              this.state.data.map((piece) =>
                <Link key={piece._id} to={`${piece.url}`}>
                  <li>
                    {piece.name}
                  </li>
                </Link>
              )
            }
          </ul>
        </label>

      </div>
    );
  }
}

const Genre = ({match}) => (
  <div>
    <h3>{match.params.genreId}</h3>
  </div>
)

const Genres = ({ match }) => {
  return (
    <div>
        <Route path={`${match.url}/:genreId`} component={Genre}/>

        <Route exact path={match.url} render={() => (
          <div>
            <GenreList url={match.url}/>
          </div>
        )}/>
    </div>
  );
}

export default Genres;

var mongoose = require('mongoose');

var Schema = mongoose.Schema;

var GenreSchema = Schema({
 name: { type: String, required: true, min: 3, max: 100 },
}, {
   toObject: {
     virtuals: true
   },
   toJSON: {
     virtuals: true
   } //reference to the associated book
});

// Virtual for bookinstance's URL
GenreSchema
.virtual('url')
.get(function () {
  return '/catalog/genres/' + this._id;
});

//Export model
module.exports = mongoose.model('Genre', GenreSchema);