Проблема с маршрутизатором в React Js (компонент для отображения) - PullRequest
Новая
       21

Проблема с маршрутизатором в React Js (компонент для отображения)

0 голосов
/ 12 апреля 2020

Я новичок в ReactJs и хочу перейти к другому компоненту по нажатию кнопки. Я просто хочу выполнить простую маршрутизацию. Это код, который я пробовал. Но я не могу направить его.

в приложении. js

        import React from 'react';
        import DepartmentShow from './Components/Departments/DepartmentShow';
        import {BrowserRouter, Link, Route, Switch} from 'react-router-dom'
          <BrowserRouter>
        <Link to = '/departments'>Departments</Link>
    <Switch>
<Route path='/customers' component= {CustomerList} exact={true} />
      <Route path='/customers/new' component= {AddCustomer} />
      <Route path='/customers/edit/:id' component= {EditCustomer} />
      <Route path='/customers/:id' component= {CustomerShow} />
       <Route Path='/departments' component={ListDepartment} exact={true}/>
          <Route exact Path='/departments/:id' component={DepartmentShow} />
     </Switch>
         </BrowserRouter>

ListDepartment. js

<ul>
              {
                  props.department.map((dept)=>{
                  return <li key={dept._id}><Link to={`/departments/${dept._id}`}>{dept.name}</Link>
                  <button onClick={()=>{handleRemove(dept._id)}}>remove</button>
                  <Link to={`/departments/${dept._id}`}><button>Show</button></Link>
                  </li>

                  })
              }
          </ul>

Примечание: пользовательский компонент я могу маршрут, но не отдел ..: (*

DepartmentShow. js

import React from 'response' 

function DepartmentShow (props){
    return(
        <div>
            <h1>Show Details</h1>
        </div>
    )
}

export default DepartmentShow

Когда я нажимаю на кнопку show, мой компонент show должен покажите. enter image description here

когда я нажимаю на шоу, я получаю URL вроде http://localhost: 3000 / департаментов / 5e922d889b38110016837a77

, но это не маршрутизируется для показа компонента.

...