1

I have a situation where on clicking on a div element, the browser should navigate to a different page. In the onClick of this event, I change the value of the state variable and in the Link tag, I pass the values to the next component.

The code is like 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;
    }
}

And the parent class for the same is like this

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

After this, I get error as errror

Aayushi
  • 1,736
  • 1
  • 26
  • 48

1 Answers1

0

hashHistory is not available from the react-router-dom package v4 onwards and has been moved to history npm package. You however can make use of HashRouter instead of BrowserRouter

Also with the link component if you want to pass a dynamic value make use of template literals instead of having the value within single quotes.

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

With the use of template literals if {this.props.data} has a value foo then the link path will be evaluated to /fullblog/foo , however if you use single quotes your path will remain /fullblog/${this.props.data}

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • If I have to use browserhistory as I am trying to implement a dynamic web application, then how can I pass history? – Aayushi Jul 22 '17 at 14:39
  • and what do you mean by template literals – Aayushi Jul 22 '17 at 14:39
  • Why do you want to pass history, if it is to implement dynamic routing you can see this example https://stackoverflow.com/questions/44127739/programatically-routing-based-on-a-condition-with-react-router/44128108#44128108 See this for template literals https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals – Shubham Khatri Jul 22 '17 at 14:51
  • what difference will it make, I will be doing the same thing just returning it in a function!The ultimate result will be the same, I guess! – Aayushi Jul 22 '17 at 14:54
  • Can you elaborate a little as to what is happening and what you need – Shubham Khatri Jul 22 '17 at 14:58
  • I just want to navigate to the component fullblog on click of the div, but that is not happening. – Aayushi Jul 22 '17 at 15:02
  • Instead, the div that I click on is disappearing – Aayushi Jul 22 '17 at 15:02
  • Instead of using the Link component you can implement dynamic routing in the loadBlog component as mentions in one of my above comment. Also that div will disappear because onClick you call loadBlog function where you are setting state load to `true` and you are rendering div only on false load value – Shubham Khatri Jul 22 '17 at 15:08
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/149892/discussion-between-aayushi-and-shubham-khatri). – Aayushi Jul 22 '17 at 15:09