Question

我想在点击该组件时导航到另一个页面，所以我习惯用Link tag轻松完成，但我想在没有链接标记的情况下导航。是否有任何路由概念，而不是这个链接标记。有人可以澄清我。我附上我的代码，

// Libraries
import React, { Component, Button, PropTypes } from 'react';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router-dom'

import {Row} from './dataTables/Row';

class Customers extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.props.customersActions.fetchCustomers();
  }

  render() {
    return (
     <div className="customer-container">
       <div className="body-container">
          <div className="row-scroll">

             {this.props.customersData.customers.filter(function(customer, index) {
               if(index != 0) return true;
               else return false;
              }).map(customer =>

          <Link to={'/customer/'+ customer.customer_id} key={customer.customer_id}                        className="line-removal">
            
            <Row customer={customer} />
           
           </Link>   // what are all the other options instead of Link ???

                
              )
             }
             
          </div>
       </div>
     </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return { customersData: state.customers };
}

export default connect(
  })
)(Customers);

以上是我的代码，有人可以帮我解决这个问题。

Answer 1

您可以使用history.push()和标准反应onClick来构建与<Link />提供的相同的行为。

工作演示（点击＆＃34;转到关于＆＃34;按钮）：https://codesandbox.io/s/ER23MMvL0

<强> Home.js

import React from 'react';

export default ({ history }) => {
  const handleClick = () => {
    history.push('/about');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
};

<强> index.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

const App = () => (
  <Router>
    <div style={styles}>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </div>
  </Router>
);

render(<App />, document.getElementById('root'));

反应js中没有链接标记的可点击路由

1 个答案: