क्या लिंक पर क्लिक करने पर विभिन्न घटकों को एक ही स्थान पर प्रस्तुत करना संभव है?

मेरे पृष्ठ में APP घटक के अंदर एक SideNav और एक TopNav घटक हैं। मैं जो करना चाहता हूं वह पृष्ठ के मध्य में एक थ्रिंड घटक डालना है जो विभिन्न लिंक और बटन पर क्लिक करने पर अलग-अलग परिणाम प्रदर्शित करता है।

माई ऐप कंपोनेंट इस तरह है

import {SideNav} from "./SideNav";
import {TopNav} from "./TopNav";
class App extends React.Component {
    render() {
        return (
            <div className={'container'}>
                <SideNav />
                <TopNav />
                <div className={'content'}>
                    Content will be rendered here on clicking the link but how?
                </div>
            </div>

        );
    }
}

मैं कंटेनर वर्ग के अंदर विभिन्न घटकों को प्रदर्शित करना चाहता हूं। ऐसा करने के लिए क्या किया जा सकता है?

import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";

class SideNav extends React.Component{
    render() {
        return (
                <div className={"sidenav"}>
                    <Router>
                    <Link href="#">About</Link>
                    <Link href="#">Services</Link>
                    <Link href="#">Clients</Link>
                    <Link href="#">Contact</Link>
                    </Router>
                </div>
        );
    }
}

मैं चाहता हूं कि लिंक एक ही स्थान पर विभिन्न घटकों को क्लिक करके उन्हें प्रस्तुत करें। उदाहरण के लिए, यदि मैं Home पर क्लिक करता हूं तो मैं पृष्ठ के मध्य में मौजूदा सामग्री की तुलना में होम प्रदर्शित करना चाहता हूं। प्रक्रिया क्या है।

मेरा Home घटक अभी-अभी Hello World प्रदर्शित करता है

0
Deshwal 5 सितंबर 2019, 17:02

1 उत्तर

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

आपको अपनी सामग्री को राउटर से लपेटने की आवश्यकता है, न कि नेविगेशन घटकों के साथ। ऐशे ही:

function App() {
    return (
        <div className="App">
            <Router>
                <div className={"container"}>
                    <SideNav />
                    <Switch>
                        <Route exact path="/">
                            Some home content
                        </Route>
                        <Route path="/services">Some Services content</Route>
                        <Route path="/clients">Some Clients content</Route>
                        <Route path="/about">
                            <About />
                        </Route>
                        <Route path="/contact">Some Contact content</Route>
                    </Switch>
                    <div className={"content"}>
                        Content will be rendered here on clicking the link but how?
                    </div>
                </div>
            </Router>
        </div>
    );
}

और फिर अपने एनएवी घटकों में आप केवल लिंक का उपयोग करते हैं:

class SideNav extends React.Component {
    render() {
        return (
            <div className={"sidenav"}>
                <Link to="/about">About</Link>
                <Link to="/services">Services</Link>
                <Link to="/clients">Clients</Link>
                <Link to="/contact">Contact</Link>
            </div>
        );
    }
}

मैंने आपको यहां काम करने वाला सैंडबॉक्स उदाहरण बनाया है।

1
Jovan Damjanovic 5 सितंबर 2019, 14:30