मैं प्रतिक्रिया में एक नौसिखिया हूँ और कुछ समस्याओं के साथ फंस गया हूँ। जैसा कि मैंने अपने मार्गों को 3 विशिष्ट घटकों में परिभाषित किया है। कृपया उन्हें नीचे खोजें।

इंडेक्स.जेएस

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import {Provider} from 'react-redux';
import store from './Redux/store';

ReactDOM.render(
  <Provider store={store}>
  <BrowserRouter >
    <App />
  </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

App.js

//import logo from './logo.svg';
import './App.css';
import SignupAndSignInComponent from './Components/Sign-In and Sign-Up Component/Sign-in.and.signup.component';
import {Route,Switch} from 'react-router';
//import Menu from './Components/Menu-Component/menu.component';
//import sideNavBar from './Components/SideNavBar Component/Sidenavbar.component';
import Admin from './Components/Admin-Component/admin.component';
function App() {
  return (
   
    <Switch>
      <Route exact path="/" component={SignupAndSignInComponent}/>
      <Route path="/admin" component={Admin} />

      </Switch>
 
  );
}

export default App;

admin.component.jsx

import React from 'react';
import { Route } from 'react-router-dom';
//import Employees from '../Employees/employees.component';
import {Switch} from 'react-router-dom';
import Menu from '../Menu-Component/menu.component';
//import EmployeeEdit from '../EmployeeEdit/employeeEdit.component';
import LeaveTypeEdit from '../LeaveTypeEdit/leaveTypeEdit.component';
import LeaveTypes from '../LeaveTypes/leavetypes.component';
import Department from '../Department/department.component';
import DepartmentEdit from '../DepartmentEdit/departmentEdit.component';
import EmployeeRouteComponent from '../EmployeeRoute-Component/employeeroute.component';
//<Route  path={`${match.path}/employees/edit/:email`} component={EmployeeEdit} />
//<Route  path={`${match.path}/employees/edit`} component={EmployeeEdit} />

const Admin = ({ match }) => (
  <div className='shop-page'>
      <Menu/>
      <Switch>
        <Route exact path={`${match.path}/employees`} component={EmployeeRouteComponent} />
        <Route exact path={`${match.path}/leavetypes`}  component={LeaveTypes}/>
        <Route path={`${match.path}/leavetypes/edit/:leave_id`}  component={LeaveTypeEdit}/>
        <Route exact path={`${match.path}/department`} component={Department} />
        <Route  path={`${match.path}/department/edit/:department_id`} component={DepartmentEdit} />
        <Route  path={`${match.path}/department/edit`} component={DepartmentEdit} />
       </Switch>
  </div>
);

export default Admin;

employeroute.component.jsx

import React from 'react';
import Employees from '../Employees/employees.component'; 
import EmployeeEdit from '../EmployeeEdit/employeeEdit.component';
import { Route } from 'react-router-dom';
import {Switch} from 'react-router-dom';
import {withRouter} from 'react-router-dom';

const EmployeeRouteComponent=({ match })=> 
 {
     console.log("kjsdj",match.path);
       return(
         <Switch>
               <Route exact path={`${match.path}/data`} component={Employees} />
               <Route path={`${match.path}/data/edit/:email`} component={EmployeeEdit} />
               <Route path={`${match.path}/data/edit`} component={EmployeeEdit} />
        </Switch> 
    );

 }
export default withRouter(EmployeeRouteComponent);

कर्मचारी.component.jsx

import axios from 'axios';
import React, { useEffect,useState } from 'react';
import './employees.styles.scss';
import EmployeeDetails from '../EmployeeDetails/employeedetails.component';
import CustomButton from '../Custom-Button-Component/custom-button.component';
//import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
import setEmployees from '../../Redux/Action/employees.action';

const Employees=(props)=>
{
    //const[employeeData,setEmployeeData]=useState(null);

    useEffect(
        async()=>{
          
         
            const response=await axios.get("http://localhost:8080/api/v1/employeedetails");
            const data=response.data;
            console.log(data);
            props.setEmployees(data);
          
         
        },
   [JSON.stringify(props.employees)] );
//cellpadding="0" cellspacing="0"

   console.log(props.employees);
    return (
        <section className="table-responsive">
           <h3 style={{color: "red"}}>{props.message}</h3>
        <h1>Employee Details</h1>
        <CustomButton onClick={()=>props.history.push(props.match.path+"/edit/-1")}>Add Employee</CustomButton>
        <div className="tbl-header">
          <table  border="0">
            <thead>
              <tr>
                <th>EmailId</th>
                <th>UserType</th>
                <th>Department</th>
                <th>Reporting</th>
                <th>Designation</th>
                <th>PhoneNumber</th>
                <th>Action</th>
              </tr>
            </thead>
          </table>
        </div>
        <div className="tbl-content">
          <table  border="0">
            <tbody>
            {props.employees?props.employees.map(employee=><EmployeeDetails key={props.employees.email_id}
            email_id={employee.email_id}
            department={employee.department}
            designation={employee.designation}
            phone_number={employee.phone_number}
            reporting={employee.reporting}
            user_type={employee.user_type}

             />):<EmployeeDetails/>}
           </tbody>
          </table>
         </div>  
        </section> 
    );

    
}
const mapStateToProps=(state)=>({
   message:state.login.message,
   employees:state.login.employees
});

const mapDispatchToProps=(dispatch)=>({
   setEmployees:employees=>dispatch(setEmployees(employees))
})

export default connect(mapStateToProps,mapDispatchToProps)(Employees);

और जैसा कि आप देख सकते हैं कि मैंने कर्मचारी घटक मार्ग को "http://localhost: 3000/व्यवस्थापक/कर्मचारी/डेटा" के रूप में परिभाषित किया है, लेकिन फिर भी, यह घटक लोड नहीं करता है और जब मैं इस विशिष्ट के लिए रूट करता हूं तो कुछ भी लॉग नहीं कर सकता मार्ग। लेकिन सब कुछ ठीक काम कर रहा है जब मैं "व्यवस्थापक घटक" में परिभाषित सभी मार्गों तक पहुंच रहा हूं लेकिन "कर्मचारी रूट" घटक में परिभाषित मार्गों तक पहुंचने में सक्षम नहीं हूं। कृपया मुझे बताएं कि क्या मेरी तरफ से कुछ कमी है।

1
Abhijeet 23 जिंदा 2021, 10:35
जांचें कि क्या आप अपनी परियोजना में 'राउटर' का उपयोग करते हैं? मूल रूप से राउटर ने सभी घटकों को एक बार रूट में लपेट दिया है
 – 
Kirill Skomarovskiy
23 जिंदा 2021, 10:46
1
आपने Router का उपयोग कैसे किया?
 – 
Taghi Khavari
23 जिंदा 2021, 11:01
1
हाँ मैंने ब्राउज़र राउटर के अंदर ऐप घटक लपेट लिया है
 – 
Abhijeet
23 जिंदा 2021, 11:08
कृपया, क्या आप इसका परीक्षण करने के लिए कोडसैंडबॉक्स प्रोजेक्ट प्रदान कर सकते हैं?
 – 
Adrian Naranjo
23 जिंदा 2021, 13:31
क्षमा करें @AdrianNaranjo मैं कोड सैंडबॉक्स से परिचित नहीं हूँ। क्या मैं आपको कोड या GitHub लिंक भेज सकता हूँ?
 – 
Abhijeet
23 जिंदा 2021, 20:33

1 उत्तर

सबसे बढ़िया उत्तर

समस्या यह है कि आपके पास अपने विभिन्न Switch ब्लॉक एक दूसरे के सापेक्ष प्रस्तुत किए गए हैं। विशेष रूप से यह exact गलत तरीके से उपयोग करने के कारण है।

आइए इस बारे में सोचें कि कैसे हम /admin/employees/data पथ से इसके घटक को खोजने की अपेक्षा करते हैं। आपके पास यह कथन यहाँ है:

<Route exact path={`${match.path}/data`} component={Employees} />

एक EmployeeRouteComponent के अंदर।

वह EmployeeRouteComponent अंदर से लोड किया गया है Admin यहां:

<Route exact path={`${match.path}/employees`} component={EmployeeRouteComponent} />

लेकिन आप केवल EmployeeRouteComponent लोड कर रहे हैं यदि url exact "/admin/employees/" से मेल खाता है। आपका URL "/admin/employees/data" सटीक मिलान नहीं है इसलिए यह इस शर्त को छोड़ देता है। यह Admin में सभी संभावनाओं को देखता है और कोई मेल नहीं पाता है, इसलिए यह Menu और बिना सामग्री के एक div प्रदान करता है।

आपको अपने Route से exact को हटाना होगा और जब आप इसमें होंगे तो मैं आपके अन्य सभी exact को हटा दूंगा। इसके बजाय छोटे वाले से पहले अधिक विशिष्ट URL डालें (क्योंकि राउटर पहले मैच का चयन करेगा)। उदाहरण के लिए, यदि आप अपने Admin मार्ग को अपने SignupAndSignInComponent से पहले ले जाते हैं, तो कोई भी URL जो "/admin" से शुरू नहीं होता है, साइन-अप लोड करेगा।

1
Linda Paiste 25 जिंदा 2021, 02:16
यह ठीक काम कर रहा है और विस्तृत स्पष्टीकरण के लिए बहुत बहुत धन्यवाद।
 – 
Abhijeet
29 जिंदा 2021, 18:32