मैं एक रिएक्टज एप्लिकेशन पर काम कर रहा हूं - और मैंने दो मेनू बनाए हैं - हेडर/फ़ूटर - जब मैं पृष्ठों पर नेविगेट करता हूं तो मैंने "सक्रिय" स्थिति पर एक बग देखा है।

// वर्तमान समस्याएं

  1. होम पेज पर आने पर होम लिंक हेडर मेनू पर सक्रिय होता है, लेकिन फुटर मेनू पर क्लिक करते समय - गोपनीयता - गोपनीयता लिंक सक्रिय होता है लेकिन हेडर लिंक तब भी सक्रिय होते हैं जब उन्हें निष्क्रिय किया जाना चाहिए।
  2. साथ ही जब किसी ऐसे पृष्ठ पर जा रहे हैं जो टाइपिंग/होम2 जैसे मौजूद नहीं है - इसे त्रुटि पृष्ठ पर उछालना चाहिए लेकिन ऐसा नहीं है - राउटर में इसमें क्या हस्तक्षेप हो रहा है?

// होम पेज पर भूमि -- होम पेज सक्रिय है यहां छवि विवरण दर्ज करें

// गोपनीयता पर भूमि - पाद लेख में गोपनीयता सक्रिय है - लेकिन हेडर में होम पेज अभी भी सक्रिय है।

enter image description here

// हैडर.जेएस

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Menu, Icon, Alert } from 'antd'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

// this is a class because it needs state
class Header extends Component {

  state = {
    current: 'home',
  }

  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  componentDidMount() {    

  }

  render() {
    return (
      <Menu
        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
        <Menu.Item key="home">
          <Link to="/home" rel="noopener noreferrer">Home</Link>
        </Menu.Item>
        <Menu.Item key="account">
          <Link to="/account" rel="noopener noreferrer">Account</Link>
        </Menu.Item>
      </Menu>
    )
  }
}

export default Header

// फूटर.जेएस

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Menu, Icon, Alert } from 'antd'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

// this is a class because it needs state
class Footer extends Component {

  state = {
    current: 'home',
  }

  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }

  componentDidMount() {    

  }

  render() {
    return (
      <Menu
        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
        <Menu.Item key="about">
          <Link to="/about" rel="noopener noreferrer">About</Link>
        </Menu.Item>
        <Menu.Item key="terms">
          <Link to="/terms" rel="noopener noreferrer">Terms of Service</Link>
        </Menu.Item>
        <Menu.Item key="privacy">
          <Link to="/privacy" rel="noopener noreferrer">Privacy Policy</Link>
        </Menu.Item>
      </Menu>
    )
  }
}

export default Footer

// राउटर.जेएस

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory'
import { Provider } from 'react-redux'
import { createStore, compose } from 'redux'

// components
import Login from './components/Login/Login'

import Home from './components/Home/Home'
import Account from './components/Account/Account'

import About from './components/About/About'
import Terms from './components/Terms/Terms'
import Privacy from './components/Privacy/Privacy'

import Error from './components/Error/Error'

import Header from './components/Header/Header'
import Footer from './components/Footer/Footer'

const history = createBrowserHistory()

//const store = createStore(rootReducer, compose(
const store = createStore(compose(
  typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : (f) => f
  )
)

// we can pass the lang files as props to the routes
// we should have a nested route inside service here to show the other services page

class Routes extends Component {
  render () {
    return (
      <Provider store={store}>
        <Router history={history}>
          <div className='off-canvas-wrap' data-offcanvas>
            <div className='inner-wrap'>
              <Header transparent />
              <Switch>
                <Route path='/home' component={Home} />
                <Route path='/account' component={Account} />

                <Route path='/about' component={About} />
                <Route path='/terms' component={Terms} />
                <Route path='/privacy' component={Privacy} />

                <Route path='/login' component={Login} />
                <Route path='/' component={Login} />
                <Route component={Error} />
              </Switch>
              <Footer transparent />
            </div>
          </div>
        </Router>
      </Provider>
    )
  }
}

export default Routes
0
The Old County 27 अगस्त 2017, 17:30
आपका प्रतिक्रिया राउटर संस्करण क्या है?
 – 
RIYAJ KHAN
27 अगस्त 2017, 17:39
"प्रतिक्रिया-राउटर-डोम": "^ 4.2.2",
 – 
The Old County
27 अगस्त 2017, 17:45
-- क्या यह सिर्फ इसलिए है क्योंकि शीर्षलेख/पाद लेख घटकों को पृष्ठ पर नहीं होने पर कुछ अचयनित करने की आवश्यकता है?
 – 
The Old County
27 अगस्त 2017, 17:45

2 जवाब

अगर आप रिएक्ट राउटर 4 का इस्तेमाल कर रहे हैं

आप NavLink का उपयोग कर सकते हैं। यह activeClassName और activeStyle विकल्प वर्ग और सक्रिय शैली

activeClassName

<NavLink to="/about" activeClassName="selected">about </NavLink>

सक्रिय शैली

<NavLink
  to="/about"
  activeStyle={{
    color: 'red'
   }}
>about</NavLink>

उस पृष्ठ पर जाने पर भी जो मौजूद नहीं है जैसे टाइपिंग /home2 -- यह त्रुटि पृष्ठ पर बाउंस होना चाहिए लेकिन ऐसा नहीं होता है - राउटर में इसमें क्या बाधा है?

मुद्दा यहाँ है:

<Route path='/' component={Login} />

यदि कोई मार्ग मेल नहीं खाता है, तो यह Login घटक को प्रस्तुत करेगा न कि Error घटक को

Error घटक का 404 व्यवहार प्राप्त करने के लिए आपको exact को Route में जोड़ना होगा।

ऐसा करने का सही तरीका।

<Route exact path='/' component={Login} />
0
RIYAJ KHAN 27 अगस्त 2017, 17:58
- लेकिन यह antd मेनू का उपयोग कर रहा है - मुझे लगता है कि पाद लेख के लिए मैं NavLink का उपयोग कर सकता था - लेकिन हेडर उपयोग मेनू के लिए - मैं हेडर मेनू को उत्तरदायी पर कॉम्पैक्ट करने के लिए कॉन्फ़िगर करना चाहता हूं
 – 
The Old County
27 अगस्त 2017, 17:46
-- मैं देख रहा हूँ -- हाँ मेरे पास / लॉगिन पृष्ठ के लिए था -- लेकिन आप कह रहे हैं कि मुझे लॉगिन पृष्ठ के लिए सटीक पथ करना चाहिए -- ठीक है, क्या मेरे पास यह बस /लॉगिन होना चाहिए - और / पर रीडायरेक्ट का उपयोग करना चाहिए? -- मैं चाहता हूं कि अगर वे लॉग इन नहीं हैं तो वे केवल लॉगिन पेज पर बाउंस करें - अन्यथा मुझे लगता है कि होम पेज वह जगह है जहां वे जाएंगे
 – 
The Old County
27 अगस्त 2017, 20:15
should I have it just /login - and use a redirect on / ? हां। लॉगिन न होने पर /ogin पर बाउंस करें
 – 
RIYAJ KHAN
27 अगस्त 2017, 20:17
- ठीक है - क्या आप इसका डेमो कर सकते हैं - अगर लॉग इन/लॉग इन बाउंस नहीं है - 'रिएक्ट-राउटर' से आयात {रूट, रीडायरेक्ट} <रूट सटीक पथ = "/" रेंडर = {() => (लॉग इन ? ( ​​<रीडायरेक्ट टू = "/डैशबोर्ड"/> ) : (
 – 
The Old County
27 अगस्त 2017, 20:24
 – 
The Old County
27 अगस्त 2017, 20:24

समस्या आपके रूट घटक में है, यह समस्या उत्पन्न होती है:-

 <Route path='/' component={Login} />

यह ऐसा होना चाहिए

<Route exact path='/' component={Login} />

यदि आप exact विशेषता का उपयोग नहीं करेंगे, तो हर बार यह रूटिंग / से मेल खाएगा। इसलिए इस समस्या से बचने के लिए आपको एक exact कीवर्ड जोड़ना होगा।

0
Shashwat Prakash 12 नवम्बर 2019, 12:24