Перенаправить на другой компонент, нажав кнопку, которая является частью существующего компонента

Question

Я новичок, чтобы реагировать.Я пытаюсь перенаправить на компонент, нажав на кнопку, которая является частью существующего визуализированного компонента.Теперь я хочу, чтобы при нажатии кнопки новый компонент отображался, а существующий должен быть скрыт (кнопка также).

render(){
    return(

            <div className='container'>
            <table className='table table-striped'>
                <thead>
                    <tr>
                        <th>User_Id</th>
                        <th>User_Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.arr.map((card)=>{
                        return(
                            <tr>
                                <td>{card.user_id}</td>
                                <td>{card.user_name}</td>
                                <td>{card.email}</td>
                                <td>
                                    <button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button>
   //click here(the Edit button) to Redirect to another component
                                </td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
                            </tr>       
                    ) })}
                </tbody>
             </table>
        </div>
    )

}

, а компонент, подлежащий отображению, -

export default class Edit extends Component{
    render(){
      return(
        <div>
          <h1>Edit User.</h1>
        </div>
       )
    }
 }

Answer 1

react-router-dom имеет компонент Link, который обрабатывает его самостоятельно.Все, что вам нужно сделать, это предоставить URL-адрес, куда он должен перенаправляться, в to propПросто замените элементы button на компонент Link:

import { Link } from 'react-router-dom';

<Link to="/url-to-edit" className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</Link>

Подробнее о компоненте Link .

Answer 2

import { Route } from 'react-router-dom'

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </button>
  )} />
)