প্রতিক্রিয়া-রাউটার: কোনও পথ খুঁজে পাওয়া যায়নি?

Question

নিম্নোক্ত বিবেচনা কর:

var AppRoutes = [
    <Route handler={App} someProp="defaultProp">
        <Route path="/" handler={Page} />
    </Route>,

    <Route  handler={App} someProp="defaultProp">
        <Route path="/" handler={Header} >
            <Route path="/withheader" handler={Page} />
        </Route>
    </Route>,

    <Route handler={App} someProp="defaultProp">
        <Route path=":area" handler={Area} />
        <Route path=":area/:city" handler={Area} />
        <Route path=":area/:city/:locale" handler={Area} />
        <Route path=":area/:city/:locale/:type" handler={Area} />
    </Route>
];

আমার কাছে একটি অ্যাপ টেম্পলেট, একটি শিরোনাম টেম্পলেট এবং একই হ্যান্ডলারের (অ্যাপ টেম্পলেটের মধ্যে) প্যারামিতিযুক্ত রুটের সেট রয়েছে। যখন কিছু পাওয়া যায় না তখন আমি 404 টি রুট পরিবেশন করতে সক্ষম হতে চাই। উদাহরণস্বরূপ, / সিএ / সানফ্রান্সিসকো অঞ্চল দ্বারা সন্ধান করা এবং পরিচালনা করা উচিত, যেখানে / সানফ্রান্সিসকোস 404 হওয়া উচিত।

এখানে আমি কীভাবে দ্রুত রুটগুলি পরীক্ষা করি Here

['', '/', '/withheader', '/SanFranciscoz', '/ca', '/CA', '/CA/SanFrancisco', '/CA/SanFrancisco/LowerHaight', '/CA/SanFrancisco/LowerHaight/condo'].forEach(function(path){
    Router.run(AppRoutes, path, function(Handler, state){
        var output = React.renderToString(<Handler/>);
        console.log(output, '\n');
    });
});

সমস্যাটি হ'ল / সানফ্রান্সিসকোজ সর্বদা অঞ্চল পৃষ্ঠা দ্বারা পরিচালিত হয় তবে আমি এটি 404 এ চাই Also এছাড়াও, আমি যদি প্রথম রুটের কনফিগারেশনে একটি নটফাউন্ডআউট যুক্ত করি তবে সমস্ত অঞ্চল পৃষ্ঠা 404।

<Route handler={App} someProp="defaultProp">
    <Route path="/" handler={Page} />
    <NotFoundRoute handler={NotFound} />
</Route>,

আমি কি ভুল করছি?

এখানে একটি সংক্ষিপ্তসার যা ডাউনলোড এবং পরীক্ষামূলকভাবে করা যেতে পারে।

https://gist.github.com/adjavaherian/aa48e78279acddc25315

Comments

এই প্রশ্নটি শেষ হওয়া লোকদের ভবিষ্যতের রেফারেন্সের জন্য, নীচের সঠিক উত্তর ছাড়াও, এই নিবন্ধটি পড়ুন । আমি আগে এটি পেরিয়ে এসেছি এবং আমি মনে করি সেই ব্যক্তি এটি পুরোপুরি ব্যাখ্যা করেছেন।

— দিমিত্রিস দামিলোস

Answer 1

ডিফল্টরউট এবং নটফাউন্ডরাউটকে রিএ্যাক্ট-রাউটার 1.0.0 এ সরানো হয়েছে।

আমি জোর দিয়ে বলতে চাই যে তারকাচিহ্নের সাথে ডিফল্ট রুটটি কাজ করার জন্য বর্তমান শ্রেণিবিন্যাস স্তরে শেষ হতে হবে । অন্যথায় এটি গাছের পরে উপস্থিত সমস্ত অন্যান্য রুটকে ওভাররাইড করবে কারণ এটি প্রথম এবং প্রতিটি পথের সাথে মেলে।

প্রতিক্রিয়া-রাউটার 1, 2 এবং 3 এর জন্য

আপনি যদি 404 প্রদর্শন করতে চান এবং পথটি রাখতে চান (নটফাউন্ডআরট হিসাবে একই কার্যকারিতা)

<Route path='*' exact={true} component={My404Component} />

আপনি যদি 404 পৃষ্ঠা প্রদর্শন করতে চান তবে url পরিবর্তন করতে (ডিফল্টরউটের হিসাবে একই কার্যকারিতা)

<Route path='/404' component={My404Component} />
<Redirect from='*' to='/404' />

একাধিক স্তর সহ উদাহরণ:

<Route path='/' component={Layout} />
    <IndexRoute component={MyComponent} />
    <Route path='/users' component={MyComponent}>
        <Route path='user/:id' component={MyComponent} />
        <Route path='*' component={UsersNotFound} />
    </Route>
    <Route path='/settings' component={MyComponent} />
    <Route path='*' exact={true} component={GenericNotFound} />
</Route>

প্রতিক্রিয়া-রাউটার 4 এবং 5 এর জন্য

পথ রাখুন

<Switch>
    <Route exact path="/users" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>

অন্য রুটে পুনঃনির্দেশ করুন (url পরিবর্তন করুন)

<Switch>
    <Route path="/users" component={MyComponent} />
    <Route path="/404" component={GenericNotFound} />
    <Redirect to="/404" />
</Switch>

অর্ডারটি গুরুত্বপূর্ণ!

Comments

যদি আপনার কাছে কোনও রিডুক্স অ্যাপ থাকে তবে আপনি কীভাবে করবেন: <Redirect from='*' to='/home' />এই সিনট্যাক্সে:const routes = { component: Main, childRoutes: [ { path: '/', component: Home }, ], indexRoute: { component: Main, }, };

— tatsu

আপনি যদি 404-উপযুক্তগুলির জন্য প্রপস সেট করতে চান তবে এই কোডটি ব্যবহার করুন:<Route render={(props)=> <MyComponent myProp={someVar} {...props} />} />

— মার্কো ওয়েবার

500 পৃষ্ঠার কী হবে? এমন একটি পৃষ্ঠা পছন্দ করুন যা ভারী হওয়ার কথা কিন্তু এপিআই ত্রুটি দেয়। রুটটি রাখার সময় ব্যর্থ হওয়া পৃষ্ঠার পরিবর্তে এটি কীভাবে দেখানো যায়?

— পিক্সম্যাচ

<= "/ 404" /> এ পুনর্নির্দেশের ফলে রিঅ্যাক্ট-রাউটার-ডম 5.0.0 এ সর্বাধিক আপডেটের গভীরতা অতিক্রম করে। 404 পৃষ্ঠাটি প্রস্থান করা হলেও, এটি পুনঃনির্দেশ করে।

— মিগুয়েলস্লাভি

আমি পুনঃনির্দেশ ব্যবহার করা পছন্দ করি না কারণ এটি ব্যবহারকারীর থেকে সমস্যাযুক্ত ইউআরএল লুকায়। এটি আগের পৃষ্ঠায় ফিরে আসতে আবারও দুবার আঘাত করতে হবে।

— sdgfsdh

Answer 2

রিঅ্যাক্ট-রাউটারের নতুন সংস্করণগুলিতে আপনি একটি স্যুইচটিতে রুটগুলি মোড়তে চান যা কেবল প্রথম মিলিত উপাদানকেই সরবরাহ করে। অন্যথায় আপনি একাধিক উপাদান রেন্ডার দেখতে পাবেন।

উদাহরণ স্বরূপ:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  browserHistory,
  Switch
} from 'react-router-dom';

import App from './app/App';
import Welcome from './app/Welcome';
import NotFound from './app/NotFound';

const Root = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route exact path="/" component={App}/>
      <Route path="/welcome" component={Welcome}/>
      <Route component={NotFound}/>
    </Switch>
  </Router>
);

ReactDOM.render(
  <Root/>,
  document.getElementById('root')
);

Comments

আপনাকে path="*"নটফাউন্ড রুটে অন্তর্ভুক্ত করার দরকার নেই । বাদ দেওয়া pathরুটটি সর্বদা মিলবে।

— চিপিত 24

দেরিতে আসার লোকদের জন্য, @ চিপিত 24 ঠিক আছে, বিভ্রান্তি এড়াতে কেবল pathঅজানা রুটের জন্য পুরোপুরি বাদ দিন

— Altair312

Answer 3

প্রতিক্রিয়া রাউটারের নতুন সংস্করণ (এখন ২.০.১ ব্যবহার করে) এর সাহায্যে, আপনি সমস্ত 'অন্যান্য পাথ' রুট করার পথে একটি নক্ষত্রটিকে ব্যবহার করতে পারেন।

সুতরাং এটি দেখতে এই মত হবে:

<Route route="/" component={App}>
    <Route path=":area" component={Area}>
        <Route path=":city" component={City} />
        <Route path=":more-stuff" component={MoreStuff} />    
    </Route>
    <Route path="*" component={NotFoundRoute} />
</Route>

Answer 4

এই উত্তরটি বিক্রিয়া-রাউটার -4 এর জন্য। আপনি স্যুইচ ব্লকে সমস্ত রুট মোড়তে পারেন, যা স্যুইচ-কেস এক্সপ্রেশনটির মতোই কাজ করে এবং প্রথম মিলিত রুটের সাথে উপাদানটি রেন্ডার করে। যেমন)

<Switch>
      <Route path="/" component={home}/>
      <Route path="/home" component={home}/>
      <Route component={GenericNotFound}/> {/* The Default not found component */}
</Switch>

কখন ব্যবহার করতে হবে exact

নির্ভুল:

<Route path='/home'
       component = {Home} />

{/* This will also work for cases like https://<domain>/home/anyvalue. */}

সঠিক সহ:

<Route exact path='/home'
       component = {Home} />

{/* 
     This will NOT work for cases like https://<domain>/home/anyvalue. 
     Only for https://<url>/home and https://<domain>/home/
*/}

এখন আপনি যদি রাউটিং প্যারামিটারগুলি স্বীকার করছেন এবং যদি এটি ভুল হয়ে যায়, আপনি এটি লক্ষ্য উপাদানটিতে নিজেই পরিচালনা করতে পারেন। যেমন)

<Route exact path='/user/:email'
       render = { (props) => <ProfilePage {...props} user={this.state.user} />} />

এখন প্রোফাইলপেজ.জেজে

if(this.props.match.params.email != desiredValue)
{
   <Redirect to="/notFound" component = {GenericNotFound}/>
   //Or you can show some other component here itself.
}

আরও বিশদের জন্য আপনি এই কোডটি দিয়ে যেতে পারেন:

App.js

ProfilePage.js

Answer 5

মতে ডকুমেন্টেশন , রুট ছিল পাওয়া, যদিও রিসোর্স ছিল না।

দ্রষ্টব্য : যখন কোনও উত্স খুঁজে পাওয়া যায় না তখন এটি ব্যবহার করার উদ্দেশ্যে নয়। রাউটারের সাথে কোনও মিল খুঁজে পাওয়া যায় না এমন বৈধ URL এবং বৈধ URL এর মধ্যে পার্থক্য রয়েছে যার ফলস্বরূপ কোনও সংস্থান খুঁজে পাওয়া যায় না। ইউআরএল কোর্সগুলি / 123 একটি বৈধ url এবং ফলাফলের সাথে একটি মিলিত রুটের ফলস্বরূপ, রাউটিংয়ের সাথে সম্পর্কিত হিসাবে এটি "পাওয়া গেছে"। তারপরে, যদি আমরা কিছু ডেটা আনি এবং আবিষ্কার করি যে 123 কোর্সটি বিদ্যমান নেই, তবে আমরা কোনও নতুন রুটে স্থানান্তর করতে চাই না। ঠিক সার্ভারের মতোই, আপনি এগিয়ে যান এবং ইউআরএল পরিবেশন করেন তবে বিভিন্ন ইউআই রেন্ডার করেন (এবং আলাদা স্ট্যাটাস কোড ব্যবহার করুন)। আপনার কখনই কোনও নটফাউন্ডরয়েটে স্থানান্তর করার চেষ্টা করা উচিত নয়।

সুতরাং, উত্সটি বৈধ কিনা তা পরীক্ষা করতে আপনি সর্বদা Router.run()আগে একটি লাইন যুক্ত React.render()করতে পারেন। Handlerনোটফাউন্ড ভিউটি প্রদর্শনের জন্য কেবল কোনও উপাদানকে একটি প্রোপ নীচে দিন বা একটি কাস্টম দিয়ে উপাদানটিকে ওভাররাইড করুন ।

Comments

ধন্যবাদ @ ব্র্যাড, আপনি ঠিক বলেছেন, আপনাকে এইটি উপাদান দিয়ে পরিচালনা করতে হবে এবং রাউটার.রুনের আগে হ্যান্ডলারটি ওভাররাইড করতে হবে

— 4m1r

নটফাউন্ডকে অবজ্ঞাত করা হয়েছিল github.com/reactjs/react-router/releases/tag/v1.0.0 , এখন ম্যাচের জন্য শেষ সাব রুট হিসাবে ব্যবহার করুন <Route path="*" to="/dest" />বা <Redirect from="*" to="/dest" />হিসাবে, আমি বিশ্বাস করি

— পিটিম

Answer 6

আমি কেবল আপনার উদাহরণটি দেখেছি, তবে আমি যদি সঠিকভাবে এটি বুঝতে পারি তবে আপনি গতিশীল বিভাগগুলিতে 404 টি রুট যুক্ত করার চেষ্টা করছেন। কয়েক দিন আগে আমার একই সমস্যা ছিল, # 458 এবং # 1103 পাওয়া গেছে এবং রেন্ডার ফাংশনটির মধ্যে একটি হাতে তৈরি চেকটি শেষ হয়েছে:

if (!place) return <NotFound />;

আশা করি এইটি কাজ করবে!

Comments

ধন্যবাদ @ জর্ন, আমি মনে করি আপনি ঠিক বলেছেন, এটি উপাদান স্তর থেকে কেবল ঠিকানা

— হিসাবেই দেখা যায়