প্রতিক্রিয়া রাউটার ভি 4 - কীভাবে বর্তমান রুট পাবেন?

Question

আমি প্রদর্শন করতে একটি চাই titleমধ্যে <AppBar />যে একরকম বর্তমান রুটে থেকে পাস করা হয়েছে।

প্রতিক্রিয়া রাউটার ভি 4-তে, কীভাবে <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

— Damjan Pavlica

Answer 1

রিঅ্যাক্ট -রাউটারের 5.1 রিলিজে ইউললোকেশন নামে একটি হুক রয়েছে যা বর্তমান অবস্থানের অবজেক্টটিকে ফিরিয়ে দেয়। আপনার বর্তমান ইউআরএলটি জানার দরকার পড়লে এটি কার্যকর হতে পারে।

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

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

Comments

দয়া করে মনে রাখবেন এটি কেবল রাউটার ডিওএম-এর অভ্যন্তরে ব্যবহার করা যেতে পারে (যেমন চিড উপাদানগুলি, যেখানে রাউটারটি ব্যবহৃত হয় এমন শ্রেণি / কার্যকরী উপাদানগুলিতে নয়)। এটি আমার মতো নবজাতকের কাছে সুস্পষ্ট হতে পারে তবে :-) আমি সমস্ত সময় "ইউজকন্টেক্সটটি অপরিজ্ঞাত" ত্রুটিটি পেয়ে যাচ্ছিলাম

— বেনিহিলারিয়াস

এছাড়াও যদি কোনও রাউটার 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 সহ, যদি আপনার উপাদানটি কিছু নেস্টেড রুটগুলিতে উচ্চ স্তরের শ্রদ্ধার সাথে রেন্ডার করা হয় (যা পরে পথটি প্রসারিত করে) অবস্থান।উথরউটারের ভিতরে থাকা নামটি পৃথক হবেwindow.location.pathname

— মায়োম্যান

আমরা কীভাবে এটি প্রতিক্রিয়া উপাদানটির বাইরে প্রোগ্রামগতভাবে পাই?

— 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/phর্শন

Comments

তবে আপনি কীভাবে সম্পূর্ণ ইউআরএল পাবেন?

— টেসারাকটার

Answer 4

এখানে আরও পড়ুন ব্যবহার করে একটি সমাধান দেওয়া হয়েছেhistory

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

রাউটার ভিতরে

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

Comments

প্রতিক্রিয়াশীল কার্যকরী পথে আমাদের মধ্যে তাদের জন্য, এই উত্তরটি সবচেয়ে অর্থবহ করে। সেই this.props....যাই হোক না কেন শুধু আমাদের কানে গোলমাল হয়।

— খোফি

Answer 5

রিএ্যাক্ট -রাউটার ভি 5 তে ইউজলোকেশন নামে একটি হুক রয়েছে , এইচওসি বা অন্যান্য স্টাফের প্রয়োজন নেই, এটি খুব সংক্ষিপ্ত এবং সুবিধাজনক।

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

এই উত্তরটি অনেক বেশি রেট দেওয়া উচিত। এই অন্যান্য সমাধানগুলির তুলনায় হুক ব্যবহার করা অনেক সহজ এবং স্বজ্ঞাত (যদি আরআর

— ভি

Answer 6

আমি মনে করি লেখকটির প্রতিক্রিয়া রাউটার (v4) সবেমাত্র যুক্ত করেছে যে নির্দিষ্ট ব্যবহারকারীদের সন্তুষ্ট করতে রাউটার এইচওসি দিয়ে। তবে আমি বিশ্বাস করি যে আরও ভাল পন্থা হ'ল কেবল রেন্ডার প্রপ ব্যবহার করা এবং সেই প্রপসগুলিতে পাস হওয়া একটি সাধারণ প্রপস রুট উপাদান তৈরি করা। আপনি এটি রউটারের মতো উপাদানটিকে "সংযুক্ত" না করায় এটি পরীক্ষা করা সহজ। রাউটারের সাথে গুটিয়ে রাখা নেস্টেড উপাদানগুলির একটি গুচ্ছ রাখুন এবং এটি মজাদার হবে না। আরেকটি সুবিধা হ'ল আপনি রুটটিতে যা যা প্রপস চান তাও আপনি এই পাসটি ব্যবহার করতে পারেন। রেন্ডার প্রপ ব্যবহার করে এখানে সাধারণ উদাহরণ। (তাদের ওয়েবসাইট https://reacttraining.com/react-router/web/api/Route/render-func থেকে সঠিক উদাহরণ ) (এসসিআর / উপাদান / রুট / প্রপস-রুট)

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

এই সমাধানটিকে আমরা কোডপেনে পরিণত করতে পারে এমন কোনও উপায় আছে কি? আমি আরও সঠিক সমাধানটি ব্যবহার করতে চাই তবে বাস্তবায়ন কীভাবে করব তা আমি সত্যিই বুঝতে পারি না।

— এলএডামস 87

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

এই একটি বিষয়ে নিশ্চিত না। অবশ্যই, এটি বর্তমান পথের নাম দিচ্ছে, তবে আমি কোনও নতুন পৃষ্ঠায় নেভিগেট করলে সেটি পরিবর্তন হয় না।

— অ্যালেক্স