javascript - 链接到在 react 中不起作用

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 包 v4 及以上版本中不可用，已移至 history npm 包。但是，您可以使用 HashRouter 而不是 BrowserRouter

对于链接组件，如果您想传递动态值，请使用模板文字，而不是将值放在单引号内。

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

使用模板文字时，如果{this.props.data}具有值foo，则链接路径将被评估为/fullblog/foo ，但是如果您使用单引号，您的路径将保留 /fullblog/${this.props.data}