প্রপ `ইতিহাস`` রাউটারে প্রয়োজনীয় হিসাবে চিহ্নিত হয়েছে, তবে এর মান ʻund परिभाषित` ` রাউটারে


97

আমি রিঅ্যাকটজেগুলিতে নতুন। এটি আমার কোড:

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
  <Router history={hashHistory}>
  <Route path="/" component={Main}></Route>
</Router>, document.getElementById('app'));

এবং এটি ওয়েবপ্যাক দিয়ে সংকলন করে। এছাড়াও আমি আমার এলিয়াসগুলিতে প্রধান উপাদান যুক্ত করেছি। কনসোল এই ত্রুটিগুলি ছুড়ে ফেলেছে: আমি এই লিঙ্কগুলিও পড়েছি:

প্রতিক্রিয়া রাউটার 'ইতিহাস' ব্যর্থ হয়েছে, অপরিবর্তিত

আমি কীভাবে ইতিহাসকে প্রয়োজনীয় চিহ্নিত হিসাবে সমাধান করব, যখন মানটি সংজ্ঞায়িত হয়?

প্রতিক্রিয়া-রাউটার আপগ্রেড করা এবং ব্রাউজারের ইতিহাসের সাথে হ্যাশ ইতিহাসের প্রতিস্থাপন

এবং ওয়েবে অনেক অনুসন্ধান, কিন্তু আমি এই সমস্যাটি ঠিক করতে পারিনি। প্রতিক্রিয়া রাউটার সংস্করণ 4

উত্তর:


172

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

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App';

ReactDOM.render((
     <BrowserRouter>
          <Route path="/" component={App}/>
     </BrowserRouter>
     ),
     document.getElementById('root')
);

সূত্র


11
সংস্করণ 4-এ, আপনি যখন 'রিএ্যাক্ট-রাউটার-ডোম' ব্যবহার করছেন তখন 'রিএ্যাক্ট-রাউটার' আমদানির দরকার নেই। 'রিঅ্যাক্ট-রাউটার-ডোম' সম্পূর্ণ।
মাম্মাদ

4
ব্রাউজাররউটারের ভিতরে যদি আমার একাধিক <রুট ...> ট্যাগ থাকে তবে আমি এই ত্রুটিটি পেয়েছি: "আনকচড ত্রুটি: একটি <রাউটার> এর মধ্যে একটিমাত্র শিশু উপাদান থাকতে পারে"। কিভাবে ঠিক করবো?
olefrank

4
@ ইআরপি রিঅ্যাক্ট-রাউটার-ডম-এ রিঅ্যাক্ট-রাউটারের চেয়ে বেশি বিকল্প রয়েছে। আপনি দস্তাবেজটি দেখতে যেতে পারেন could তবে আপনি কেবল তার মধ্যে একটি ব্যবহার করেছেন।
মাম্মাদ 2 সি

4
@ এনএনএস কোডার নং, রাউটারটিও 'রিএ্যাক্ট-রাউটার-ডোম' এ রয়েছে তাই 'রিঅ্যাক্ট-রাউটার-ডোম' এবং 'রিঅ্যাক্ট-রাউটার' উভয়ই অন্তর্ভুক্ত করার দরকার নেই। আপনার যদি 'হ্যাশরাউটার' এবং 'রাউটার' একসাথে প্রয়োজন হয়, আপনাকে 'রিএ্যাক্ট-রাউটার-ডোম' অন্তর্ভুক্ত করতে হবে।
মাম্মাদ 2 সি

4
@ অ্যালফ্র্যাঙ্ক আপনার নিজের একাধিক <Route...>বক্তব্যগুলিকে <switch>মোড়কের পরিবর্তে মোড়কে মোড়ানো প্রয়োজন <div>। আপনি যদি ব্যবহার করেন <div>, এটি রুটগুলিকে অন্তর্ভুক্ত করে তোলে যার অর্থ কোনও পথ যদি দুটি রুটের সাথে মেলে তবে উভয় উপাদান রেন্ডার হবে। এখানে সম্পূর্ণ বিশদটি
মুহাম্মদ হান্নান

17

আপনি প্রতিক্রিয়া রাউটারটির কোন সংস্করণ ব্যবহার করছেন? রাউটার সংস্করণ 4 browserHistory একটি দৃষ্টান্ত দিয়ে যাওয়া browserHistory ক্লাসে পাশ থেকে পরিবর্তিত দেখুন নতুন ডক্স কোড উদাহরণস্বরূপ

এটি স্বয়ংক্রিয়ভাবে আপগ্রেড হওয়া প্রচুর লোককে ধরে ফেলছে; একটি মাইগ্রেশন ডকুমেন্ট 'এখন যে কোনও দিন' বাইরে থাকবে।

আপনি এটি শীর্ষে যুক্ত করতে চান:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

এবং

<Router history={newHistory}/>

সংস্করণ ৪. আপনি দয়া করে আমার কোডটি সংস্করণ ৪ এ রূপান্তর করতে পারবেন?
মম্মাদ 2 সি

customHistoryসংজ্ঞায়িত কোথায় ?
শার্পকোডার

দুঃখিত ভাল এখন?
চার্লস মেরিয়াম

4

আপনি যদি একাধিক রুট রাখতে চান তবে আপনি এটির মতো স্যুইচ ব্যবহার করতে পারেন,

import {Switch} from 'react-router'; 

তারপর

<BrowserRouter>
     <Switch>
         <Route exact path="/" component={TodoComponent} />
         <Route path="/about" component={About} />
     </Switch>
</BrowserRouter>

3

আমি ES6 তেও একই সমস্যা পেয়েছি, কিন্তু যখন আমি 'রিঅ্যাক্ট-রাউটার-ডম' লাইব্রেরিটি ব্যবহার করতে চলেছি তখন সমস্যাটি সমাধান হয়ে গেছে। ES6 এর সমস্ত অনুরাগীর জন্য, আমরা এখানে যাচ্ছি:

npm install --save react-router-dom

ইনডেক্স.জেজে:

import {HashRouter, Route} from 'react-router-dom';
import App from './App';

ReactDOM.render(
    <HashRouter>
        <Route path="/" component={App}/>
    </HashRouter>
  ,
  document.getElementById('root')
);

In index.js:বা In index.jsx:?
রাজ গালস্টিয়ান

আপনি যদি ওয়েবপ্যাকটি ব্যবহার করেন তবে @ রাজগালস্টিয়ান সূচি.জেএসএস।
তেওমন শিপাহি

1

প্রতিক্রিয়া রাউটারের সংস্করণ 4 বেশ কয়েকটি জিনিস বদলেছে। তারা বিভিন্ন ইতিহাসের ধরণের জন্য পৃথক শীর্ষ স্তরের রাউটার উপাদান তৈরি করেছে। আপনি যদি সংস্করণ 4 ব্যবহার করছেন তবে আপনার <Router history={hashHistory}>সাথে <HashRouter>বা এর সাথে প্রতিস্থাপন করতে সক্ষম হওয়া উচিত <BrowserRouter>
আরও বিশদের জন্য https://reacttraining.com/react-router/web/guides দেখুন


0

আমি লগইন অনুশীলনও লিখি। এবং আপনার মত একই প্রশ্ন দেখা। এক দিনের লড়াইয়ের পরে, আমি দেখতে পেয়েছি যে কেবলমাত্র this.props.history.push('/list/')অনেকগুলি প্লাগইন এ টানানোর পরিবর্তে এটি তৈরি করতে পারে। যাইহোক, react-router-domসংস্করণটি হ'ল ^4.2.2। ধন্যবাদ!

handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err,values)=>{
        if(!err){
            this.setState({
                visible:false
            });
            this.props.form.resetFields();
            console.log(values.username);
            const path = '/list/';
            this.props.history.push(path);
        }
    })
}


0

নীচে আমার জন্য "প্রতিক্রিয়া-প্রতিক্রিয়া@^3.0.5" নিয়ে কাজ করে:

প্যাকেজ.জসন:

"react-dom": "^16.6.0",
"react-router": "^3.0.5"

index.js:

import { render } from 'react-dom'
import { App } from './components/App'
import { NotFound404 } from './components/NotFound404'
import { Router, Route, hashHistory } from 'react-router'

render(
    <Router history={hashHistory}>
        <Route path='/' component={App} />
        <Route path='*' component={NotFound404} />
    </Router>,
    document.getElementById('root')
)
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.