प्रोप `इतिहास` को` राउटर` में आवश्यक के रूप में चिह्नित किया गया है, लेकिन इसका मूल्य inedundefined` है। राउटर में

Question

मैं ReactJs में नया हूं। यह मेरा कोड है:

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 है

Answer 1

यदि आप प्रतिक्रिया-राउटर v4 का उपयोग कर रहे हैं तो आपको प्रतिक्रिया-राउटर-डोम को भी स्थापित करना होगा। उसके बाद, प्रतिक्रिया-राउटर-डोम से BrowserRouter आयात करें और BrowserRouter के लिए राउटर स्विच करें। ऐसा लगता है कि v4 कई चीजों को बदलते हैं। इसके अलावा, प्रतिक्रिया-राउटर प्रलेखन पुराना है। यह मेरा काम कोड है:

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')
);

स्रोत

Comments

संस्करण 4 में, जब आप 'प्रतिक्रिया-राउटर-डोम' का उपयोग कर रहे हैं, तो 'प्रतिक्रिया-राउटर' आयात करने की कोई आवश्यकता नहीं है। 'प्रतिक्रिया-राउटर-डोम' पूरा हो गया है।

— मम्मड

यदि मेरे पास एकाधिक <मार्ग ...> BrowserRouter के अंदर टैग हैं, तो मुझे यह त्रुटि मिलती है: "अनकवर्ड एरर: ए <राउटर> में केवल एक चाइल्ड एलिमेंट हो सकता है"। कैसे ठीक करना है?

— ओलेफ्रांक

@erp प्रतिक्रिया-राउटर-डोम में प्रतिक्रिया-राउटर की तुलना में अधिक विकल्प हैं। आप दस्तावेज़ पर जा सकते हैं। लेकिन आप उनमें से केवल एक का उपयोग करें।

— मम्माद

@NSCoder नहीं, राउटर भी 'रिएक्ट-राउटर-डोम' में है, इसलिए 'रिएक्ट-राउटर-डोम' और 'रिएक्शन-राउटर' दोनों को शामिल करने की जरूरत नहीं है। यदि आपको 'HashRouter' और 'रूटर' की एक साथ ज़रूरत है, तो आपको 'प्रतिक्रिया-रूटर-डोम' को शामिल करना होगा।

— मम्माद 2 सी

@olefrank आपको अपने कई <Route...>बयानों को <switch>लपेटने के बजाय आवरण में लपेटने की आवश्यकता है <div>। यदि आप उपयोग करते हैं <div>, तो यह मार्गों को समावेशी बनाता है, जिसका अर्थ है कि यदि कोई मार्ग दो मार्गों से मेल खा सकता है, तो दोनों घटक प्रस्तुत करेंगे। पूरा विवरण यहां देखें: medium.com/@djoepramono/react-router-4-gotchas-2ecd1282de65

— मुहम्मद हन्नान

Answer 2

रिएक्ट राउटर के कौन से संस्करण का आप उपयोग कर रहे हैं? राउटर संस्करण 4 ब्राउज़रहिस्टर क्लास में पास होने से बदलकर ब्राउज़रहिस्ट्री की आवृत्ति में बदल जाता है, नए डॉक्स में कोड उदाहरण देखें ।

यह बहुत से लोगों को पकड़ रहा है जो स्वचालित रूप से अपग्रेड करते हैं; एक माइग्रेशन दस्तावेज़ 'अब किसी भी दिन' बाहर होगा।

आप इसे शीर्ष पर जोड़ना चाहते हैं:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

तथा

<Router history={newHistory}/>

Comments

संस्करण 4. क्या आप मेरे कोड को संस्करण 4 में बदल सकते हैं, कृपया?

— मैमड2 सी

कहाँ customHistoryपरिभाषित किया गया है?

— शार्पकोड

माफ़ करना। अब बेहतर है?

— चार्ल्स मरियम

Answer 3

यदि आप कई मार्ग चाहते हैं तो आप इस तरह से स्विच का उपयोग कर सकते हैं,

import {Switch} from 'react-router'; 

फिर

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

Answer 4

मुझे ES6 में यही समस्या मिली, लेकिन जब मैंने 'रिएक्ट-राउटर-डोम' लाइब्रेरी का उपयोग करने के लिए स्विच किया, तो समस्या हल हो गई। ES6 के सभी प्रशंसकों के लिए, यहाँ हम जाते हैं:

npm install --save react-router-dom

Index.js में:

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

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

Comments

In index.js:या In index.jsx:?

— आरजे गल्स्टियन

@RazGalstyan index.js यदि आप वेबपैक का उपयोग कर रहे हैं।

— तेमन शिपाही

Answer 5

रिएक्ट राउटर के संस्करण 4 ने कई चीजों को बदल दिया। उन्होंने विभिन्न प्रकार के इतिहास के लिए अलग-अलग शीर्ष स्तर के राउटर तत्व बनाए। यदि आप संस्करण 4 का उपयोग कर रहे हैं, तो आपको इसके <Router history={hashHistory}>साथ <HashRouter>या बदलने में सक्षम होना चाहिए <BrowserRouter>।
अधिक विवरण के लिए, https://reacttraining.com/react-router/web/guides देखें

Answer 6

मैं एक लॉगिन अभ्यास भी लिखता हूं। और आपके जैसे ही सवाल भी मिलते हैं। एक दिन के संघर्ष के बाद, मैंने पाया कि केवल 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);
        }
    })
}

Answer 7

नीचे मेरे लिए "प्रतिक्रिया-router@^3.0.5" के साथ काम करता है:

package.json:

"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')
)