反応しないリンクへ

Question

div要素をクリックすると、ブラウザは別のページに移動する必要があります。このイベントのonClickでは、状態変数の値を変更し、リンクタグで値を次のコンポーネントに渡します。私はないです

Answer 1

hashHistoryとしてエラーを取得し、

コードが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; 
    } 
} 

のようなもので、そのための親クラスは、この後、この

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

のようなものですreact-router-dom package v4以降にあり、history npmパッケージに移動されました。ただし、BrowserRouterの代わりにHashRouterを使用することができます

ダイナミックな値を渡したい場合はリンクのコンポーネントでも、値を一重引用符で囲む代わりにtemplate literalsを使用します。テンプレートリテラルを使用することにより

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

{this.props.data}が値fooを持っているならば、リンクパスを使用すると、単一引用符を使用する場合、私はとしてbrowserhistory使用する必要がある場合はしかし、あなたのパスが/fullblog/${this.props.data}