0

I want to navigate to another page when that component is clicked so i used to do that easily with Link tag but i want to navigate without link tag . is there any routing concepts rather that this Link tag . can someone clarify me pls .Here i attached my code ,

// 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);

above is my code , can someone pls help me out from this.

Beckham Vinoth
  • 65
  • 1
  • 2
  • 10

2 Answers2

1

You can use history.push() and standard react onClick to build the same behaviour like <Link /> provides.

Working demo (click on "Go to About" button): 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'));
Dawid Karabin
  • 5,113
  • 1
  • 23
  • 31
0

You can use useNavigate() in Router v6.

import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  <button onCLick={() => navigate("/about")}>Click me!</button>;
};
Nara Hiromichi
  • 1
  • 1