Lien pour ne pas réagir

Question

J'ai une situation où, en cliquant sur un élément div, le navigateur devrait naviguer vers une page différente. Dans le onClick de cet événement, je change la valeur de la variable d'état et dans la balise Link, je passe les valeurs au composant suivant.

Le code est comme this-

import React from 'react'; 
import ReactDom from 'react-dom' ; 
import $ from 'jquery' ; 
import {Switch, BrowserRouter as Router,Route,Link} from 'react-router-dom' 
import {FullBlog} from './FullBlog.js' 


class Author extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     data:this.props.data, 
    } 
    this.loadBlog=this.loadBlog.bind(this); 
    } 

    loadBlog(i){ 
    var data=this.state.data[i]; 
    this.setState({ 
    data:data, 
    }) 

    } 

    render(){ 
    let content=(<p></p>); 
    //console.log(this.state.data); 
    var data=this.state.data; 

    content=( 
     <div> 
     <Link to={'/fullblog/${data}'} /><div onClick={this.loadBlog.bind(this,this.props.i)} className="box"> 
     <div>{this.props.i}</div> 
      <div>{this.props.data.Author}</div> 
      <div>{this.props.data.Book}</div> 
     </div> 
     </div> 

    ) 


     return content; 
    } 
} 

Et la classe parente pour la même est comme celui-ci

import React from 'react' 
import ReactDOM from 'react-dom' 
import {ExpenseApp} from './expense-app.js' 
import {Switch, BrowserRouter as Router,Route,hashHistory} from 'react-router-dom' 
import {FullBlog} from './FullBlog.js' 
class App extends React.Component{ 

    render(){ 
     return(
      <Router> 
     <div> 
       <Route path='/' render={()=><ExpenseApp data={data}/>}/> 
      <Route path='/fullblog' component={FullBlog}/> 
     </div> 
      </Router> 
      ) 
    } 
} 
ReactDOM.render(<App/>, document.getElementById('container')) 

Après cela, je reçois erreur

Answer 1

hashHistory n'est pas disponible à partir du react-router-dom package v4 et a été déplacé au paquet history npm. Vous pouvez cependant utiliser HashRouter au lieu de BrowserRouter

également avec le composant de lien si vous voulez passer un faire usage de la valeur dynamique de template literals au lieu d'avoir la valeur entre guillemets simples.

<Link to={`/fullblog/${this.props.data}`} /> 

Avec l'utilisation de littéraux de modèle si {this.props.data} a une valeur foo alors le chemin de liaison sera évaluée à /fullblog/foo, si vous utilisez des guillemets simples votre chemin restera /fullblog/${this.props.data}