रिएक्टर राउटर url बदलता है लेकिन दृश्य नहीं

Question 1

मुझे रूटिंग के साथ प्रतिक्रिया में दृश्य बदलने में परेशानी हो रही है। मैं केवल उपयोगकर्ताओं की एक सूची दिखाना चाहता हूं, और प्रत्येक उपयोगकर्ता पर क्लिक करके विवरण पृष्ठ पर जाना चाहिए। यहाँ राउटर है:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

जब मैं url / विवरण का उपयोग करता हूं तो मेरा ब्राउज़र उस url पर नेविगेट करता है, लेकिन दृश्य नहीं बदलता है। कोई अन्य मार्ग 404 फेंकता है, इसलिए यह मार्ग को पहचानता है लेकिन अद्यतन नहीं करता है।

Question 2

आपको exactअपनी अनुक्रमणिका के लिए विशेषता निर्दिष्ट करने की आवश्यकता है , अन्यथा /detailsमार्ग के लिए यह अभी भी साथ मेल खाएगा /। इसके अलावा आयात करने की कोशिश Routeसेreact-router-dom

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

import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route exact path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

अपडेट करें:

एक और चीज जो आपको करने की जरूरत है वह है अपने कंपोनेंट को यूजर्स के साथ जोड़ना withRouter। आपको withRouterकेवल तभी उपयोग करने की आवश्यकता है जब आपका घटक प्राप्त नहीं कर रहा है Router props,

यह उन मामलों में हो सकता है जब आपका घटक राउटर द्वारा प्रदान किए गए घटक का एक नेस्टेड बच्चा है या आपने राउटर प्रॉप्स को पास नहीं किया है या जब घटक राउटर से जुड़ा नहीं है और इसे एक अलग घटक के रूप में प्रस्तुत किया गया है मार्गों।

Users.js में जोड़ें

import {withRouter} from 'react-router';

.........
export default withRouter(Users)

डॉक्स

Question 3

आपको सिर्फ राउटर के अंदर के पुर्ज़ों को लपेटना है ।

<Route exact path="/mypath" component={withRouter(MyComponent)} />

यहाँ एक नमूना App.js फ़ाइल है:

...
import { BrowserRouter as Router, Route, Switch, withRouter } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={withRouter(Home)} />
          <Route exact path="/profile" component={withRouter(Profile)} />
        </Switch>
      </Router>
    );
  }
}

export default App;

अतिरिक्त

यदि आप प्रतिक्रिया राउटर का उपयोग कर रहे हैं, तो जब भी url बदलता है , तो घटकWillReceiveProps को कॉल किया जाएगा।

componentWillReceiveProps(nextProps) {
    var currentProductId = nextProps.match.params.productId;
    var nextProductId = nextProps.match.params.productId; // from the new url
    ...
}

ध्यान दें

वैकल्पिक रूप से, आप निर्यात से पहले घटक को राउटर में भी लपेट सकते हैं , लेकिन फिर आपको कुछ अन्य चीजों को सुनिश्चित करना होगा। मैं आमतौर पर इस कदम को छोड़ देता हूं।

export default withRouter(Profile)

Question 4

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

<Router> // <--Remove nested Router
    <Switch>
      <Route exact path="/workflows" component={ViewWorkflows} />
      <Route path="/workflows/new" component={NewWorkflow} />
    </Switch>
</Router>

युसुफबेक एक ऐसे ही मुद्दे का वर्णन कर रहा है। मुझे लगता है कि घटक संबंधित मार्गों को दृश्य स्तर पर संग्रहीत करने के लिए यह एक बहुत क्लीनर है। इन सभी को एक मुख्य राउटर में संग्रहीत किया जाता है। एक उत्पादन ऐप में, यह बहुत सारे मार्गों को आसानी से पढ़ने और डिबग मुद्दों के माध्यम से रास्ता बनाने वाला है।

Question 5

मैंने उसी समस्या का सामना किया है लेकिन मैंने इसे ठीक कर लिया है। मैंने आखिरी के रूप में होम पेज रखा है। इससे मेरा काम बनता है। नीचे की तरह।

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter } from 'react-router-dom';
    import Users from "./components/Users";
    import { Router, Route } from "react-router";
    import Details from "./components/Details";

    ReactDOM.render((
      <BrowserRouter>
        <div>
            <Route path="/details" component={Details} />
            <Route path="/" component={Users} />
        </div>
      </BrowserRouter>
    ), document.getElementById('app'))

स्निपेट का विस्तार करें

Question 6

Redux का उपयोग करते समय और मेरे पास समान मुद्दे थे जहां यूआरएल पता बार में अपडेट हो रहा था लेकिन ऐप संबंधित घटक को लोड नहीं कर रहा था। मैं निर्यात में withRouter को जोड़कर हल करने में सक्षम था:

import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

export default withRouter(connect(mapStateToProps)(MyComponentName))

Question 7

मेरे पास एक समान मुद्दा था लेकिन अलग संरचना के साथ। मैंने एक राउटर जोड़ा है जो सभी मार्गों को संभाल लेगा, मैंने दृश्यों को स्विच करने के लिए स्विच घटक का उपयोग किया है। लेकिन वास्तव में, यह नहीं था। केवल URL बदला गया, लेकिन नहीं देखा गया। इसका कारण साइडबार घटक के अंदर प्रयुक्त लिंक घटक था जो राउटर घटक के बाहर था। (हां, मैंने साइडबार को "विथ राउटर" के साथ निर्यात किया है, काम नहीं किया है)। इसलिए, समाधान मेरे साइडबार घटक को स्थानांतरित करने के लिए था, जो सभी लिंक घटकों को मेरे राउटर में रखता है।

समस्या मेरे लिंकर्स में है, वे मेरे राउटर के बाहर हैं

<div className="_wrapper">
  <SideBar /> // Holds my all linkers
  <Router>
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/users" component={Users} />
     </Switch>
  </Router>
 </div>

सॉल्यूशन मेरे लिंकर्स को मेरे राउटर में ले जा रहा था

<div className="_wrapper">
  <Router>
     <SideBar /> // Holds my all linkers
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/users" component={Users} />
     </Switch>
  </Router>
</div>

Question 8

मेरे मामले में, मैंने गलती से दो BrowserRouterएस लगाए ।

Question 9

BrowserRouter आपके मामले में इतिहास को बनाए रखने में विफल है। इसके बजाय "राउटर" का उपयोग करें, प्रॉप्स के रूप में कस्टम इतिहास के साथ इसका उपयोग आपकी समस्या को हल करने में मदद कर सकता है।

import {Router, Route, Switch, withRouter } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import {createBrowserHistory} from 'history';

export const customHistory = createBrowserHistory();  //This maintains custom history

class App extends Component {
  render() {
    return (
      <Router history={customHistory}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/profile" component={Profile} />
        </Switch>
      </Router>
    );
  }
}

export default App;

फिर अपने घटकों में, 'App' से कस्टमहिस्ट्री आयात करें और नेविगेट करने के लिए इसका उपयोग करें।

customHistory.push('/pathname');

उममीद है कि इससे मदद मिलेगी! :)

Question 10

आप सूचकांक मार्ग के लिए सटीक जोड़ने की जरूरत है और न कि उन enclosing से मार्ग div द्वारा घटकों, उपयोग स्विच से मार्गों के बीच स्विच करने के लिए प्रतिक्रिया रूटर-डोम।

import React from "react";
import ReactDOM from "react-dom";
import { Route, Switch } from 'react-router-dom';
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render((
  <div>
    <Switch>
        <Route path="/" component={Users} exact/>
        <Route path="/details" component={Details} />
    </Switch>
  </div>
), document.getElementById('app'))

Question 11

मैं इसी तरह की प्रतिक्रिया के साथ था रूटर 4 संस्करण:

<Link />घटक पर क्लिक करने से , URL बदल जाएगा लेकिन दृश्य नहीं दिखेंगे।

विचारों में से एक के PureComponentबजाय Component(से आयातित react) का उपयोग कर रहा था और यही कारण था।

सभी मार्ग प्रदान की घटक है कि उपयोग कर रहे थे बदलकर PureComponentकरने के लिए Component, मेरी समस्या का समाधान किया गया था।

(संकल्प स्रोत: https://github.com/ReactTraining/react-router/issues/4975#issuecomment-355393785 )

Question 12

मैं इसी तरह के मुद्दे का सामना कर रहा था, मैं इसे पसंद करने के लिए संकल्प करता हूं, कृपया मुझे देखो कि यह काम कर रहा है।

आपको अपने कंपोनेंट में कंपोनेंटवैलिसेपप्रॉप्स फंक्शन का उपयोग करने की आवश्यकता है ।

पहली बार url www.example.com/content1/ ComponentsDidMount () चलाकर एक लिंक पर क्लिक किया गया।

अब जब आप किसी अन्य लिंक पर क्लिक करते हैं तो कहते हैं कि www.example.com/content2/ समान घटक को कहा जाता है, लेकिन इस बार प्रोप में परिवर्तन होता है और आप इस नए प्रोप को कंपोनेंटलीवरसिवप्रॉप्स (नेक्स्टप्रॉप्स) के तहत एक्सेस कर सकते हैं, जिसका उपयोग आप API या स्टेट को कॉल करने के लिए कर सकते हैं और नया प्राप्त कर सकते हैं डेटा।

componentWillReceiveProps(nextProps){
     //call your API and update state with new props
}

Question 13

हम्म कोई वास्तव में विचारों को स्विच करने के लिए कोई स्विच है।

यह है कि मैं लैंडलाइन पेज से मुख्य साइट पर स्विच करने के लिए राउटर का उपयोग कैसे करता हूं

//index.jsx    
ReactDOM.render( (<BrowserRouter><App/></BrowserRouter>), document.getElementById('root') );


//App.jsx
render()
{
    return <div>
        <Switch>
            <Route exact path='/' component={Lander}/>
            <Route path='/vadatajs' component={Vadatajs}/>
        </Switch>
    </div>
}

https://jsfiddle.net/Martins_Abilevs/4jko7arp/11/

अप मैंने पाया कि आप अलग-अलग राउटर का उपयोग करते हैं..सोर्री तब शायद यह फील आपके लिए उपयोगी हो

https://fiddle.jshell.net/terda12/mana88Lm/

शायद समाधान की कुंजी मुख्य रेंडर फ़ंक्शन के लिए लाइन में hiden है ..

Router.run(routes, function(Handler) {
    React.render(<Handler />, document.getElementById('container'));
});

Question 14

मुझे एक ही इश्यू मिलता है। मुझे नहीं लगता कि इस मामले में उन्हें प्रो राउटर को जोड़ने की आवश्यकता है, बस अपने नवलिंक में जांचें कि आप विवरण के रूप में अच्छा पथ नाम लिखते हैं। मार्ग के लिए विशिष्ट मार्ग से सामान्य की तरह शुरू करने का प्रयास करें

<Route path="/details" component={Details} />
<Route path="/" component={Users} />

अपने NavLink में यह कुछ इस तरह होना चाहिए

 <NavLink className="nav-link" to="/details">
   details<span className="sr-only">(current)</span>
 </NavLink>

इसके बाद रीटैक्ट से संबंधित सभी सामानों को आयात करने के लिए इसके बेहतर आयात के लिए एक पुनर्खरीद इसके बाद दूसरे मॉड्यूल को इस तरह से आयात करें:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";

इस तरह आओ:

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

import Users from "./components/Users";    
import Details from "./components/Details";

Question 15

मेरे लिए, मेरे पास था:

export MyClass extends React.Component

साथ में:

export default withRouter(MyClass)

इस बीच, मेरे App.js में, मेरे पास था:

import { MyClass } from './MyClass'

घर का खेल खेलने वाले मेरी समस्या देख सकते हैं। मैं राउटर के साथ आयात नहीं कर रहा था बच्चे कक्षाओं में पारित कर दिया। इसे साफ करने के लिए, मैंने रूट कंपोनेंट घोषणापत्र में withRouter कॉल को स्थानांतरित किया :

<Router exact path={'/myclass'} component={withRouter(MyClass)} />

MyClass में वापस, मैंने इसे डिफ़ॉल्ट निर्यात में बदल दिया:

export default MyClass extends React.Component

और फिर अंत में, App.js में, मैंने अपना आयात निम्न में बदल दिया:

import MyClass from './MyClass'

उम्मीद है कि यह किसी की मदद करता है। यह सुनिश्चित करता है कि एक ही वर्ग को निर्यात करने के लिए मेरे पास दो तरीके नहीं हैं, इस प्रकार राउटर प्रीपेंड को दरकिनार कर दें ।

Question 16

इसे इस्तेमाल करे,

import React from "react";

import ReactDOM from "react-dom";
import Users from "./components/Users";
import { Router, Route } from "react-router";


import Details from "./components/Details";

ReactDOM.render((
  <Router>
        <Route path="/" component={Wrapper} >
            <IndexRoute component={Users} />
            <Route path="/details" component={Details} />
        </Route>
  </Router>
), document.getElementById('app'))

Question 17

आपको इसकी जांच करनी चाहिए: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

इसलिए यह निश्चित रूप से नहीं है Usersया नहीं Details, क्योंकि वे सीधे द्वारा प्रदान किए जाते हैं <Route>, और locationवसीयत पास हो जाएगी props।

मैं सोच रहा हूं, आपको और के <div>बीच की आवश्यकता क्यों है ? इसे निकालें और मुझे बताएं कि क्या यह काम करता है।<BrowserRouter><Route>

Question 18

मैं एक सशर्त लेआउट के साथ एक समान मुद्दा था:

class LayoutSwitcher extends Component {
  render () {
    const isLoggedIn = this.props.isLoggedIn
    return (
      <React.Fragment>
        { isLoggedIn
          ? <MainLayout {...this.props} />
          : <Login />
        }
      </React.Fragment>
    )
  }
}

और शर्तों को फिर से लिखना जैसे:

  render () {
    const isLoggedIn = this.props.isLoggedIn
    if (isLoggedIn) {
      return <MainLayout {...this.props} />
    }
    return <Login />
  }

इससे यह हल हो गया। मेरे मामले में, ऐसा लगता है कि संदर्भ खो गया था।

Question 19

मेरे मामले में, BrowserRouter के बजाय HashRouter पर स्विच करने से मेरी समस्या हल हो गई

Question 20

मेरे पास एक ही मुद्दा था और मैंने इसे nt_modules में @types फ़ोल्डर से इतिहास को आयात करने के लिए निर्धारित किया था। मैंने इसे npm से आयात किया (npm i @history)

Question 21

मेरी भी यही समस्या थी। यद्यपि यह बहुत प्रभावी समाधान नहीं है, लेकिन मैंने इसे एक चालाक विधि से हल किया। कॉम्पोनेंटडीडमाउंट विधि हर बार हमारे url में परिवर्तन के लिए काम करती है। विधि के भीतर हम वर्तमान यूआरएल के साथ पिछले यूआरएल की तुलना कर सकते हैं और हम राज्य को बदल सकते हैं या पृष्ठ ताज़ा कर सकते हैं।

componentDidUpdate(prevProps) {
    if (this.props.match.url !== prevProps.match.url) {
        //this.props.history.go(0) refresh Page
        //this.setState(...) or change state
    }
}

Question 22

मैं मुसीबत से भी मिला।

https://github.com/chengjianhua/templated-operating-system

और मैंने शुभम खत्री द्वारा प्रस्तुत समाधान की कोशिश की है, लेकिन यह काम नहीं करता है।

मैंने इस समस्या को हल कर दिया है, शायद आपकी मदद कर सकता है।

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

उपरोक्त गाइड दस्तावेज़ के अनुसार, जब आप PureComponentराज्य प्रबंधन उपकरणों के साथ उपयोग या उपयोग करते हैं redux, जैसे mobx... यह आपके मार्ग के अद्यतन को अवरुद्ध कर सकता है। अपने मार्ग घटक की जाँच करें, सुनिश्चित करें कि आपने अपने घटक को रेंडरर ब्लॉक नहीं किया है।

Question 23

BrowserRouter (राउटर) में प्रोप फोर्स रीफ्रेश = {true} जोड़ने की कोशिश करें

import {BrowserRouter as Router} from "react-router-dom";

<Router forceRefresh={true}>
/// your <switch> and <route>
</Router>

इससे मेरा काम बनता है।

btw नहीं एक असली समाधान: डी