रीलोड पर प्रतिक्रिया राउटर काम करते हैं, लेकिन लिंक पर क्लिक करते समय

Question

मैंने react-router संस्करण 4 के साथ प्रतिक्रिया स्थापित की है। जब मैं सीधे ब्राउज़र पर यूआरएल दर्ज करता हूं तो रूटिंग काम करता है, हालांकि जब मैं लिंक पर क्लिक करता हूं, तो यूआरएल बदलता है ब्राउज़र पर (जैसे http://localhost:8080/categories), लेकिन सामग्री अपडेट नहीं होती है (लेकिन अगर मैं रीफ्रेश करता हूं, तो यह अपडेट हो जाता है)।

Routes.js सेटअप इस प्रकार है::

import { Switch, Route } from 'react-router-dom'; 
import React from 'react'; 

// Components 
import Categories from './containers/videos/Categories'; 
import Videos from './containers/videos/Videos'; 
import Home from './components/Home'; 

const routes =() => (
    <Switch> 
    <Route exact path="/" component={Home}/> 
    <Route path="/videos" component={Videos}/> 
    <Route path="/categories" component={Categories}/> 
    </Switch> 
); 

export default routes; 

लिंक मैं Nav.js में उपयोग इस प्रकार हैं:

नीचे मेरी सेटअप है

<Link to="/videos">Videos</Link> 
<Link to="/categories">Categories</Link> 

App.js निम्नानुसार है:

import React from 'react'; 
import './app.scss'; 
import Routes from './../routes'; 
import Nav from './Nav'; 

class AppComponent extends React.Component { 

    render() { 
    return (
     <div className="index"> 
     <Nav /> 
     <div className="container"> 
      <Routes /> 
     </div> 
     </div> 
    ); 
    } 
} 

AppComponent.defaultProps = { 
}; 

export default AppComponent; 

Answer 1

withRouter के साथ अपने घटक को लपेटना आपके लिए काम करना चाहिए। withRouter एक घटक Link या किसी अन्य Router रंगमंच की सामग्री का उपयोग करता है और

<Route component={App}/> 

की तरह है, जब इसके बुलाया घटक को प्राप्त नहीं होता है Router props Route से या तो सीधे या Parent Component

रूटर प्रॉप्स से कर रहे हैं उपलब्ध है कि के लिए आवश्यक है

या

<Route render={(props) => <App {...props}/>}/> 

या आप रूटर टैग ली के प्रत्यक्ष बच्चों के रूप में Links दे रहे हैं, तो ke

<Router> 
    <Link path="/">Home</Link> 
</Router> 

मामला है जब आप एक घटक के रूप में रूटर के भीतर बच्चे सामग्री लिखने के लिए की तरह

<Router> 
    <App/> 
</Router> 

रूटर रंगमंच की सामग्री अनुप्रयोग के लिए उपलब्ध नहीं होगा और इसलिए इच्छा में, आप इसे कहते गुजारें सकता जैसे

<Router> 
    <Route component={App}/> 
</Router> 

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

import {withRouter} from 'react-router' 

class AppComponent extends React.Component { 

    render() { 
    return (
     <div className="index"> 
     <Nav /> 
     <div className="container"> 
      <Routes /> 
     </div> 
     </div> 
    ); 
    } 
} 

AppComponent.defaultProps = { 
}; 

export default withRouter(AppComponent); 

Answer 2

संभवत: दो बातें:

1. आप अपने Nav.js फ़ाइल में { Link } from 'react-router-dom' आयात किया था?

2. संभवतः वर्तनी/पूंजीकरण त्रुटि: आप export default routes (निचला मामला) निर्यात करते हैं लेकिन import Routes from './../routes (ऊपरी मामला) निर्यात करते हैं।

Answer 3

मैं जाना होगा अपने घटकों के माध्यम से जाँच करें और सुनिश्चित करें कि आप केवल एक ही <Router> ... </Router> किया हुआ है।इसके अलावा - सुनिश्चित करें कि आपके पास <Router>...</Router> ऐसे मामले हो सकते हैं जब आप एक से अधिक का उपयोग करेंगे, लेकिन यदि आप गलती से घोंसले वाले राउटर हैं (क्योंकि आप जल्दी से हैकिंग कर रहे थे और जब आप इसे चारों ओर ले जा रहे थे तो उसे हटाने के लिए भूल गए स्थानों के प्रकार ;-) - यह एक मुद्दा पैदा कर सकता है।

मैं

import { 
    BrowserRouter as Router, 
} from 'react-router-dom' 

// Other Imports 

... 

return (
    <Router> 
    <div className="index"> 
     <Nav /> <!-- In this component you have <Links> --> 
     <div className="container"> 
     <Routes /> 
     </div> 
    </div> 
    </Router> 
); 

अपने शीर्ष सबसे घटक में (App.js) की कोशिश करेंगे।