链接到没有反应的工作

Question

我有一种情况，在点击div元素时，浏览器应该导航到另一个页面。在此事件的onClick中，我更改了状态变量的值，在Link标记中，我将值传递给下一个组件。

代码是这样的 -

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}的值为foo，则使用模板文字，然后链接路径将评估为/fullblog/foo，但如果使用单引号，则路径将保留{{1 }}