अभिक्रिया राउटर v4 - वर्तमान मार्ग कैसे प्राप्त करें?

Question

मुझे लगता titleहै <AppBar />कि वर्तमान मार्ग से किसी तरह पारित किया गया है एक में प्रदर्शित करना चाहते हैं ।

React Router v4 में, <AppBar />यह वर्तमान मार्ग को titleप्रोप से कैसे पार कर पाएगा ?

  <Router basename='/app'>
    <main>
      <Menu active={menu} close={this.closeMenu} />
      <Overlay active={menu} onClick={this.closeMenu} />
      <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

वहाँ एक कस्टम से एक कस्टम शीर्षक पारित करने के लिए एक रास्ता है propपर <Route />?

Comments

प्रतिक्रिया-राउटर 2.0.0-rc5 में वर्तमान मार्ग प्राप्त करने के लिए

— दामजन पाव्लिका

Answer 1

प्रतिक्रिया-राउटर के 5.1 रिलीज में उपयोगलोकेशन नामक एक हुक होता है , जो वर्तमान स्थान ऑब्जेक्ट को लौटाता है। वर्तमान URL जानने के लिए आपको किसी भी समय यह उपयोगी हो सकता है।

import { useLocation } from 'react-router-dom'

function HeaderView() {
  let location = useLocation();
  console.log(location.pathname);
  return <span>Path : {location.pathname}</span>
}

Comments

कृपया ध्यान दें कि इसका उपयोग केवल राउटर डोम के अंदर किया जा सकता है (यानी chid घटक, वर्ग / कार्यात्मक घटक में नहीं है जहां राउटर का उपयोग किया जाता है)। यह स्पष्ट हो सकता है लेकिन मेरे जैसे एक नौसिखिया के लिए नहीं :-) मुझे हर समय त्रुटि मिल रही थी "यूज़ कॉन्टेक्स्ट अपरिभाषित है"

— बेनीहिलियस

यह भी काम नहीं करेगा यदि राउटर redirectका उपयोग किया गया था। यह रीडायरेक्ट से पहले का रास्ता पढ़ेगा

— सोनिक सोल

इस उत्तर के लिए धन्यवाद ...

— बेलबेल

Answer 2

राउटर 4 में वर्तमान मार्ग है - this.props.location.pathname। बस this.propsसत्यापित करें और प्राप्त करें। यदि आप अभी भी नहीं देखते हैं, location.pathnameतो आपको डेकोरेटर का उपयोग करना चाहिए withRouter।

यह कुछ इस तरह लग सकता है:

import {withRouter} from 'react-router-dom';

const SomeComponent = withRouter(props => <MyComponent {...props}/>);

class MyComponent extends React.Component {
  SomeMethod () {
    const {pathname} = this.props.location;
  }
}

Comments

कृपया ध्यान दें कि यह हमेशा सच नहीं होता है: प्रतिक्रिया-रूटर 4 के साथ, यदि आपके घटक को कुछ नेस्टेड मार्गों (जो बाद में पथ का विस्तार करता है) पर उच्च स्तर के सम्मान के साथ प्रदान किया गया है। WithRouter के अंदर स्थान.पाथनाम अलग-अलग होगाwindow.location.pathname

— maioman

हम इसे रिएक्ट घटक के बाहर प्रोग्रामेटिक रूप से कैसे प्राप्त करते हैं?

— trusktr

Answer 3

यदि आप प्रतिक्रिया के टेम्प्लेट का उपयोग कर रहे हैं, जहां आपकी प्रतिक्रिया फ़ाइल का अंत इस तरह दिखता है: export default SomeComponentआपको उच्च-ऑर्डर घटक (जिसे अक्सर "एचओसी" कहा जाता है) का उपयोग करने की आवश्यकता होती है withRouter,।

सबसे पहले, आपको ऐसा करने की आवश्यकता होगी withRouter:

import {withRouter} from 'react-router-dom';

अगला, आप उपयोग करना चाहते हैंwithRouter । आप अपने घटक के निर्यात को बदलकर ऐसा कर सकते हैं। यह संभावना है कि आप से बदलना चाहते है export default ComponentNameकरने के लिए export default withRouter(ComponentName)।

फिर आप प्रॉपर से मार्ग (और अन्य जानकारी) प्राप्त कर सकते हैं। विशेष रूप से, location, match, और history। पथनाम को बाहर निकालने के लिए कोड होगा:

console.log(this.props.location.pathname);

अतिरिक्त जानकारी के साथ एक अच्छा राइटअप यहाँ उपलब्ध है: https://reacttraining.com/react-router/core/guides/ilily

Comments

लेकिन आपको पूरा url कैसे मिलता है?

— टेसैक्टर बैक्टीरिया

Answer 4

यहाँ और अधिक पढ़ें का उपयोग कर एक समाधान हैhistory

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

राउटर के अंदर

<Router>
   {history.location.pathname}
</Router>

Comments

प्रतिक्रियात्मक पथ पर हम में से उन लोगों के लिए, यह उत्तर सबसे अधिक समझ में आता है। जो this.props....कुछ भी हमारे कानों के लिए सिर्फ शोर है।

— खोही

Answer 5

प्रतिक्रिया-राउटर v5 में यूज़लोकेशन नामक एक हुक है , HOC या अन्य सामान की कोई आवश्यकता नहीं है, यह बहुत ही सक्सेसफुल और सुविधाजनक है।

import { useLocation } from 'react-router-dom';

const ExampleComponent: React.FC = () => {
  const location = useLocation();  

  return (
    <Router basename='/app'>
      <main>
        <AppBar handleMenuIcon={this.handleMenuIcon} title={location.pathname} />
      </main>
    </Router>
  );
}

Comments

इस उत्तर को बहुत अधिक रेट किया जाना चाहिए। हुक का उपयोग करना इन अन्य समाधानों की तुलना में बहुत आसान और सहज है (यदि RR v5 पर)

— BrDaHa

Answer 6

मुझे लगता है कि राइटर राउटर (v4) के लेखक ने सिर्फ कुछ उपयोगकर्ताओं को खुश करने के लिए उस HRouter HOC को जोड़ा। हालाँकि, मेरा मानना ​​है कि बेहतर तरीका यह है कि आप केवल रेंडर प्रोप का उपयोग करें और उन प्रॉपर से गुजरने वाला एक सरल प्रॉपराउट कंपोनेंट बनाएं। यह परीक्षण करना आसान है क्योंकि आप घटक को "कनेक्ट" नहीं करते हैं जैसे कि राउटर करता है। नेस्ट राउटर में लिपटे हुए नेस्टेड घटकों का एक गुच्छा रखें और यह मज़ेदार नहीं होगा। एक और लाभ यह है कि आप इस पास का उपयोग उस रूट के माध्यम से कर सकते हैं जो आप चाहते हैं। यहाँ रेंडर प्रोप का उपयोग करके सरल उदाहरण दिया गया है। (उनकी वेबसाइट https://reacttraining.com/react-router/web/api/Route/render-func से बहुत सटीक उदाहरण ) (src / घटकों / मार्गों / सहारा-मार्ग)

import React from 'react';
import { Route } from 'react-router';

export const PropsRoute = ({ component: Component, ...props }) => (
  <Route
    { ...props }
    render={ renderProps => (<Component { ...renderProps } { ...props } />) }
  />
);

export default PropsRoute;

उपयोग: (मार्ग परिमार्जन प्राप्त करने के लिए नोटिस (मिलान.प्रेम) आप बस इस घटक का उपयोग कर सकते हैं और वे आपके लिए पारित हो जाएंगे)

import React from 'react';
import PropsRoute from 'src/components/routes/props-route';

export const someComponent = props => (<PropsRoute component={ Profile } />);

यह भी ध्यान दें कि आप जो भी अतिरिक्त प्रॉप्स पास करना चाहते हैं वह भी इस तरह से पास कर सकते हैं

<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />

Comments

क्या कोई उपाय है जिससे हम इस समाधान को कोडपेन में बदल सकें? मैं अधिक सही समाधान का उपयोग करना चाहता हूं, लेकिन मुझे वास्तव में समझ में नहीं आता है कि कैसे लागू किया जाए।

— LAdams87

Answer 7

है कोन Posidielov ने कहा, वर्तमान मार्ग में मौजूद है this.props.location.pathname।

लेकिन यदि आप एक कुंजी (या नाम) जैसे अधिक विशिष्ट क्षेत्र से मेल खाना चाहते हैं, तो आप मूल रूट संदर्भ खोजने के लिए मैचपैथ का उपयोग कर सकते हैं ।

import { matchPath } from `react-router`

const routes = [{
  key: 'page1'
  exact: true,
  path: '/page1/:someparam/',
  component: Page1,
},
{
  exact: true,
  key: 'page2',
  path: '/page2',
  component: Page2,
},
]

const currentRoute = routes.find(
  route => matchPath(this.props.location.pathname, route)
)

console.log(`My current route key is : ${currentRoute.key}`)

Answer 8

जोड़ना

import {withRouter} from 'react-router-dom';

फिर अपने घटक निर्यात को बदलें

export default withRouter(ComponentName)

तब आप सीधे घटक के भीतर ही मार्ग का उपयोग कर सकते हैं (बिना अपनी परियोजना में किसी और चीज को छूए)

window.location.pathname

मार्च 2020 के साथ परीक्षण किया गया: "संस्करण": "5.1.2"

Comments

इसके बारे में पक्का भरोसा नहीं है। ज़रूर, यह वर्तमान पाथनाम दे रहा है, लेकिन अगर मैं किसी नए पृष्ठ पर नेविगेट करता हूं तो यह नहीं बदलता है।

— एलेक्स