समस्या: मुझे रिएक्ट राउटर में कुछ परेशानी हो रही है। मुझे त्रुटि मिलती है "ए में केवल एक बाल तत्व हो सकता है।"

मेरा वर्तमान सेटअप ऐसा है कि मेरा नेवबार कंटेनर और स्विच दोनों राउटर के बच्चे हैं। यह पहले काम कर रहा था और मैं इसे किसी अन्य प्रोजेक्ट पर इस तरह काम कर रहा हूं इसलिए मुझे यकीन नहीं है कि मैंने क्या तोड़ दिया।

मैंने क्या प्रयास किया है: मैंने इसे सभी स्विच टैग को लपेटने की कोशिश की है (इसलिए एनएवी कंटेनर और सभी मार्ग वहां हैं) जो संकलित होगा लेकिन फिर मुझे एक चेतावनी मिलती है "प्रतिक्रिया एक डोम तत्व पर computedMatch प्रोप को नहीं पहचानती है।" और यह मार्गों को प्रदर्शित नहीं करता है जैसा कि पहले किया था जब यह काम कर रहा था।

मैंने राउटर से एनएवी कंटेनर को बाहर करने और मार्गों के साथ टैग को ठीक ऊपर ले जाने की कोशिश की है, लेकिन मुझे एक त्रुटि मिलती है जिसमें कहा गया है कि "लिंक-टू को एक के अंदर इस्तेमाल किया जाना चाहिए"

कोई सलाह? धन्यवाद!

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBookOpen, faTags, faHistory, faShoppingBag, faUserCircle } from '@fortawesome/free-solid-svg-icons'
import { Container, Row, Col } from "shards-react";
import Main from "../pages/Main/Main.js"
import Deals from "../pages/Deals/Deals.js"
import Menu from "../pages/Menu/Menu.js"
import Cart from "../pages/Cart/Cart.js"
import Previous from "../pages/Previous/Previous.js"
import Profile from "../pages/Profile/Profile.js"

import "../Nav/Navbar.css";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";


export default class NavContainer extends React.Component {
  render() {
    return (
      <Router>

      <Container className="nav-menu-container">


        <Row>
          <Col>
            <Link to="/deals">
              <FontAwesomeIcon icon={faTags}/>
              <h6>Deals</h6>
           </Link>
          </Col>
           <Col>
             <Link to="/menu">
               <FontAwesomeIcon icon={faBookOpen}/>
               <h6>Menu</h6>
             </Link>
           </Col>
           <Col>
             <Link to="/cart">
               <FontAwesomeIcon icon={faShoppingBag}/>
               <h6>Cart</h6>
             </Link>
           </Col>
           <Col>
             <Link to="/previous">
               <FontAwesomeIcon icon={faHistory}/>
               <h6>Previous</h6>
            </Link>
          </Col>
          <Col>
             <Link to="/profile">
               <FontAwesomeIcon icon={faUserCircle}/>
               <h6>Profile</h6>
             </Link>
          </Col>
        </Row>
   </Container>

   <Switch>


          <Route path="/deals">
            <Deals />
          </Route>
          <Route path="/menu">
            <Menu />
          </Route>
          <Route path="/cart">
            <Cart />
          </Route>
          <Route path="/previous">
            <Previous />
          </Route>
          <Route path="/profile">
            <Profile />
          </Route>
          <Route path="/">
            <Main />
          </Route>




        </Switch>
      </Router>
    );
  }
}
0
Daniel 3 फरवरी 2020, 22:20

2 जवाब

क्या आपने Container और Switch को React.Fragment से लपेटने की कोशिश की है?

<Router>
  <React.Fragment>
    <Container>
      ...
    </Container>
    <Switch>
      ...
    </Switch>
  </React.Fragment>
</Router>
0
larz 3 फरवरी 2020, 22:27
जवाब के लिए धन्यवाद। मैंने इसे आज़माया और "<राउटर> में केवल एक चाइल्ड एलिमेंट हो सकता है" त्रुटि हुई, लेकिन इसके कारण बिना किसी त्रुटि के कार्यक्षमता खो गई। मैं कुछ निर्भरता स्थापित करने से पहले एक पुराने संस्करण में वापस आ गया हूं और इसे कोड के साथ काम करने में सक्षम था, लेकिन मुझे अभी भी 100% यकीन नहीं है कि ऐसा क्यों है।
 – 
Daniel
4 फरवरी 2020, 00:48

स्विच के अंदर अपने मार्गों को बदलने का प्रयास करें (मुख्य पर शीर्ष पर जाएं) और अपने मुख्य में सटीक प्रोप जोड़ें।

<Switch>
 <Route exact path="/">
   <Main />
 </Route>

 ... other routes here

</Switch

साथ ही अधिक साफ-सुथरे लुक के लिए। आप इसमें अपना रूट बदल सकते हैं:

से:

<Route path="/deals">
  <Deals />
</Route>

प्रति:

<Route path="/deals" component={Deals} />

यहां और पढ़ें: https://reacttraining.com/react-router/web/api/ मार्ग

0
crrmacarse 3 फरवरी 2020, 22:42
इतनी जल्दी उत्तर देने के लिए धन्यवाद! मैंने यह कोशिश की और इसने त्रुटि नहीं बदली लेकिन कोड को साफ करने की युक्तियों के लिए धन्यवाद! मैं अब सोच रहा हूं कि यह मुद्दा एक निर्भरता से संबंधित हो सकता है जिसे मैंने स्थापित किया है क्योंकि मैं एक पुराने संस्करण में वापस गया था और इसे काम करने में सक्षम था। मैंने मार्ग पथ के लिए आपके सुझाव को लागू किया और संसाधन की भी सराहना की।
 – 
Daniel
4 फरवरी 2020, 00:44