import React from "react";
import { withRouter, Route } from "react-router";
import { Link } from "react-router-dom";

const Component1 = () => <div>component1</div>;

const Component2 = () => <div>component1</div>;

const Component3 = () => <div>component1</div>;

const Container = (props) => {

  return (
    <div>
      <ul>
        <Link to={`${props.history.location.pathname}component1`}>
          component 1
        </Link>
        <Link to={`${props.history.location.pathname}component2`}>
          component 2
        </Link>
        <Link to={`${props.history.location.pathname}component3`}>
          component 3
        </Link>
      </ul>
      <div>
        <Route
          path={`${props.history.location.pathname}/component1`}
          exact
          component={Component1}
        />
        <Route
          path={`${props.history.location.pathname}/component2`}
          exact
          component={Component2}
        />
        <Route
          path={`${props.history.location.pathname}/component3`}
          exact
          component={Component3}
        />
      </div>
    </div>
  );
};

export default withRouter(Container);

अरे

उपरोक्त कोड के अनुसार, यदि कंटेनर पथ पर है localhost:3000/container तो जब मैं पहले आइटम पर क्लिक करता हूं, तो यह localhost:3000/container/component1 पर जाता है, वहां से यदि मैं दूसरे विकल्प पर क्लिक करता हूं, तो यह localhost:3000/container/component1/component2 जबकि वांछित कार्यक्षमता यह है कि हम localhost:3000/container/component1 से localhost:3000/container/component2 तक जाते हैं

मुझे पता है कि मैं प्रारंभिक props.history.location.pathname (इस मामले में localhost:3000/container/) को स्टोर कर सकता हूं, जब कंपोनेंट माउंट होता है, लेकिन मुझे लगता है कि इसे हासिल करने के लिए एक बेहतर तरीका होना चाहिए।

धन्यवाद।

0
mahdi 19 अक्टूबर 2019, 13:45

2 जवाब

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

History.location.pathname के बजाय, आपको match.path और match का उपयोग करना चाहिए। यूआरएल.

घटकों की एक सरणी बनाएँ। उन्हें एक उदाहरण के रूप में मैप करें (व्यक्ति आपका कंटेनर हो सकता है)। रूट में पुनरावर्ती व्यक्ति के बजाय अपने घटकों के रूट बनाएं)।

आप मेरा लाइव उदाहरण भी देख सकते हैं (जो एक संशोधित संस्करण है) ऊपर के उदाहरण के)

const A = () => <div>a</div>;
const B = () => <div>b</div>

function Container() {
  let { url } = useRouteMatch();

  const components = [A, B];

  return (
    <div>
      <ul>
        {components.map((_, idx) => (
          <li key={idx+1}>
            <Link to={`${url}/component${idx+1}`}>component{idx+1}</Link>
          </li>
        ))}
      </ul>
      <Switch>
        {components.map((component, idx) => (
          <Route path={`${url}/component${idx+1}`} component={component} />
        ))}
      </Switch>
    </div>
  );
}
1
trebor 19 अक्टूबर 2019, 14:51

ठीक है अपने मार्गों को परिभाषित करते समय आप अपने मार्गों को परिभाषित करने के लिए स्थान.पथनाम का उपयोग क्यों कर रहे हैं।

अपने मार्गों को इस रूप में बदलें

return (
<div>
  <ul>
    <Link to={`container/component1`}>
      component 1
    </Link>
    <Link to={`container/component2`}>
      component 2
    </Link>
    <Link to={`container/component3`}>
      component 3
    </Link>
  </ul>
  <div>
    <Route
      path={`container/component1`}
      exact
      component={Component1}
    />
    <Route
      path={`container/component2`}
      exact
      component={Component2}
    />
    <Route
      path={`container/component3`}
      exact
      component={Component3}
    />
  </div>
</div>
);

आशा है कि इससे सहायता मिलेगी

0
ibtsam 19 अक्टूबर 2019, 14:20