鏈接到不反應工作

Question

我有一種情況，點擊div元素時，瀏覽器應導航到不同的頁面。在此事件的onClick中，我更改狀態變量的值，並在鏈接標記中將值傳遞給下一個組件。

的代碼是像這個 -

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

出於同樣的父類是這樣

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

在此之後，我得到錯誤的

Answer 1

hashHistory不可從react-router-dom package v4起，並已移至history npm包。但是，您可以使用HashRouter而不是BrowserRouter

此外，如果您要傳遞動態值的鏈接組件，請使用template literals而不是使用單引號內的值。

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

通過使用模板文字，如果{this.props.data}有那麼鏈接路徑將被評估爲/fullblog/foo值foo，但是如果你使用單引號的路徑將保持/fullblog/${this.props.data}