मैं Django बाकी ढांचे + ट्यूटोरियल प्रतिक्रिया से सीख रहा हूँ। मुझे एक समस्या है, "ऐप घटक" यूआरएल पता दर्ज करने के बाद दिखाई नहीं दे रहा है।

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {Route, Link, Switch, BrowserRouter as Router} from "react-router-dom"
import './index.css';
import App from './App';

const routing = (
  <Router>
    <Route path="/app" component={App} />
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

ऐप.जेएस

import React, { PureComponent } from 'react';

function App() {
  return ( 
    <div>
      <h1>App component</h1>
    </div>
   );
}

export default App;
1
kowalskijakub 6 जिंदा 2022, 17:52
<Route path="/app" component={<App />} /> कोशिश करें। Route दस्तावेज़ देखें।
 – 
Camilo
6 जिंदा 2022, 17:55
यह अभी भी काम नहीं करता है, और मैंने शब्द घटक को एक तत्व के साथ बदलने की कोशिश की, लेकिन यह या तो काम नहीं करता है। मैं प्रतिक्रिया के साथ अपने साहसिक कार्य की शुरुआत में हूं और मुझे ज्यादा दस्तावेज समझ में नहीं आ रहे हैं।
 – 
kowalskijakub
6 जिंदा 2022, 18:02
कृपया जांचें कि आपने react-router-dom का कौन सा संस्करण स्थापित किया है। आपके प्रश्न में आपके पास v5 घटक और वाक्यविन्यास है। प्रोजेक्ट निर्देशिका से npm list react-router react-router-dom चलाएं और संस्करण संख्याओं की रिपोर्ट करें।
 – 
Drew Reese
6 जिंदा 2022, 19:47

3 जवाब

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

मुझे साझा कोड स्निपेट में कोई स्पष्ट मुद्दा नहीं दिख रहा है।

react-router-dom v5

आपके द्वारा साझा किए गए स्निपेट v5 घटक और सिंटैक्स हैं।

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, Switch, BrowserRouter as Router } from "react-router-dom";
import './index.css';
import App from './App';

const routing = (
  <Router>
    <Route path="/app" component={App} />
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

Edit how-to-use-route-in-react (react-router-dom v5)

react-router-dom v6

अगर आपने किसी तरह v6 स्थापित किया है, तो Switch घटक को Routes घटकों से बदल दिया गया था, और अब Routes घटक चाहिए किसी भी Route घटकों को लपेटें। एक अन्य परिवर्तन Route घटक API के साथ है, अब component प्रोप और render या children फ़ंक्शन प्रॉप्स नहीं है, सभी को एक element प्रोप से बदल दिया गया है जो एक मान के रूप में ReactElement, या JSX लेता है।

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, Routes, BrowserRouter as Router } from "react-router-dom";
import './index.css';
import App from './App';

const routing = (
  <Router>
    <Routes>
      <Route path="/app" element={<App />} />
    </Routes>
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

Edit how-to-use-route-in-react (react-router-dom v6)

1
Drew Reese 6 जिंदा 2022, 19:58

आप अपने रूट मूल घटक को याद कर रहे हैं: कृपया इसे इस तरह लपेटें और घटक को तत्व से बदलें क्योंकि यह राउटर v6 के साथ काम नहीं कर रहा है:

import {Routes, Route, Link, Switch, BrowserRouter} from "react-router-dom"

const routing = (
  <BrowserRouter>
    <Routes>
      <Route path="/app" element={<App />}></Route>
    </Routes>
  </BrowserRouter>
);
1
MWO 6 जिंदा 2022, 18:49
'मार्ग' परिभाषित नहीं है प्रतिक्रिया/jsx-no-undef
 – 
kowalskijakub
6 जिंदा 2022, 18:02
जब मैं इसे प्रतिक्रिया-राउटर-डोम से आयात करता हूं तो यह अभी भी काम नहीं करता है
 – 
kowalskijakub
6 जिंदा 2022, 18:03
आयात भी है
 – 
MWO
6 जिंदा 2022, 18:03
क्षमा करें मैंने इसे छोड़ दिया। लेकिन जब मैं इसे आयात करता हूं तब भी यह काम नहीं करता है
 – 
kowalskijakub
6 जिंदा 2022, 18:10
मैंने अपना कोड संपादित किया
 – 
MWO
6 जिंदा 2022, 18:12

आपका routing एक प्रतिक्रिया घटक नहीं है। इसे इस्तेमाल करे।

import React from 'react';
import ReactDOM from 'react-dom';
import {Route, Link, Switch, BrowserRouter as Router} from "react-router-dom"
import './index.css';
import App from './App';

const Routing = () => (
  <Router>
    <Route path="/app" component={App} />
  </Router>
);

ReactDOM.render(<Routing />, document.getElementById('root'));

आपको ReactDOM.render(...) को रिएक्ट कंपोनेंट पास करना होगा, और यह एक रिएक्ट कंपोनेंट है

const Routing = () => {
  return (...some jsx...)
}

# or short version
const Routing = () => (
  .... some jsx ....
)

यह एक प्रतिक्रिया घटक नहीं है

const Routing = (
  ...some jsx...
)
-1
Doppio 6 जिंदा 2022, 18:44
अब इसके साथ समस्या है: पहचानकर्ता 'ऐप' पहले ही घोषित किया जा चुका है।
 – 
kowalskijakub
6 जिंदा 2022, 18:39
लेकिन जब मैं कॉन्स्ट का नाम बदलता हूं और इसे रेंडर में जोड़ता हूं तो यह काम नहीं करता है जब मुझे url मिलता है localhost:3000/app< /ए>
 – 
kowalskijakub
6 जिंदा 2022, 18:39