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

Question 1

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

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

Question 2

আপনি যদি প্রতিক্রিয়া-রাউটার ভি 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')
);

সূত্র

Question 3

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

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

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

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

এবং

<Router history={newHistory}/>

Question 4

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

import {Switch} from 'react-router';

তারপর

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

Question 5

আমি 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')
);

Question 6

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

Question 7

আমি লগইন অনুশীলনও লিখি। এবং আপনার মত একই প্রশ্ন দেখা। এক দিনের লড়াইয়ের পরে, আমি দেখতে পেয়েছি যে কেবলমাত্র 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);
        }
    })
}

স্নিপেট প্রসারিত করুন

Question 8

নীচে আমার জন্য "প্রতিক্রিয়া-প্রতিক্রিয়া@^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')
)