React-Router dieselbe URL nicht remoaming, versucht herauszufinden, componentWillReceiveProps

Question

Ich arbeite an meiner ersten React App und einige Probleme mit dem Routing, nur auf der Suche nach einigen Leitlinien. Ich sehe, dass dies ein spezifisches Problem für viele Menschen ist, aber Schwierigkeiten haben, anderen Antworten zu folgen.

Von dem, was ich von anderen Antworten erzählen kann, weisen die Leute Schlüssel zu bestimmten Routen zu und prüfen den Schlüssel in componentWillReceiveProps (nextProps). Ich verstehe das, obwohl ich nicht sicher bin, wohin ich von dort aus hinübergehen sollte, um es neu zu rendern.

Ich versuche nur, zwischen den URLs /catalog/genre/:genre und /catalog/genres zu wechseln. Entschuldigung im Voraus für den unordentlichen Code, nur versuchen, es zum Funktionieren zu bringen!

App.js enthält Hauptrouten, insbesondere für dieses Problem:

<Route path="/catalog/genres" component={Genres}/>

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; 

Answer 1

Für Menschen auf dieses Problem zurückkommen, obwohl componentWillReceiveProps (nextProps) ist nützlich für andere Situationen, fand ich einen Weg um dies zu folgen, indem Sie diesem guide folgen.

Jetzt kann ich basierend auf dem URL-Parameter genreId rendern.

Hier ist der Code:

App.js Nav Komponente

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> 
    ); 
    } 
} 

Genres.js

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; 

genre.js

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