मैं 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;
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'));
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'));
आप अपने रूट मूल घटक को याद कर रहे हैं: कृपया इसे इस तरह लपेटें और घटक को तत्व से बदलें क्योंकि यह राउटर v6 के साथ काम नहीं कर रहा है:
import {Routes, Route, Link, Switch, BrowserRouter} from "react-router-dom"
const routing = (
<BrowserRouter>
<Routes>
<Route path="/app" element={<App />}></Route>
</Routes>
</BrowserRouter>
);
आपका 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...
)
<Route path="/app" component={<App />} />कोशिश करें।Routeदस्तावेज़ देखें।react-router-domका कौन सा संस्करण स्थापित किया है। आपके प्रश्न में आपके पास v5 घटक और वाक्यविन्यास है। प्रोजेक्ट निर्देशिका सेnpm list react-router react-router-domचलाएं और संस्करण संख्याओं की रिपोर्ट करें।