प्रतिक्रिया-राउटर के साथ दूसरे मार्ग पर पुनर्निर्देशित कैसे करें?

Question

मैं दूसरे दृश्य को पुनर्निर्देशित करने के लिए प्रतिक्रिया-राउटर ( संस्करण ^ 1.0.3 ) का उपयोग करके एक सिमप्ले करने की कोशिश कर रहा हूं और मैं बस थक गया हूं।

import React from 'react';
import {Router, Route, Link, RouteHandler} from 'react-router';


class HomeSection extends React.Component {

  static contextTypes = {
    router: PropTypes.func.isRequired
  };

  constructor(props, context) {
    super(props, context);
  }

  handleClick = () => {
    console.log('HERE!', this.contextTypes);
    // this.context.location.transitionTo('login');
  };

  render() {
    return (
      <Grid>
        <Row className="text-center">          
          <Col md={12} xs={12}>
            <div className="input-group">
              <span className="input-group-btn">
                <button onClick={this.handleClick} type="button">
                </button>
              </span>
            </div>
          </Col>
        </Row>
      </Grid>
    );
  }
};

HomeSection.contextTypes = {
  location() {
    React.PropTypes.func.isRequired
  }
}

export default HomeSection;

मुझे केवल '/ लॉगिन' करने के लिए उपयोग भेजना है और यही वह है।

मैं क्या कर सकता हूँ ?

कंसोल में त्रुटियाँ:

बिना संदर्भ संदर्भ: PropTypes परिभाषित नहीं है

मेरे मार्गों के साथ फ़ाइल करें

// LIBRARY
/*eslint-disable no-unused-vars*/
import React from 'react';
/*eslint-enable no-unused-vars*/
import {Route, IndexRoute} from 'react-router';

// COMPONENT
import Application from './components/App/App';
import Contact from './components/ContactSection/Contact';
import HomeSection from './components/HomeSection/HomeSection';
import NotFoundSection from './components/NotFoundSection/NotFoundSection';
import TodoSection from './components/TodoSection/TodoSection';
import LoginForm from './components/LoginForm/LoginForm';
import SignupForm from './components/SignupForm/SignupForm';

export default (
    <Route component={Application} path='/'>
      <IndexRoute component={HomeSection} />
      <Route component={HomeSection} path='home' />
      <Route component={TodoSection} path='todo' />
      <Route component={Contact} path='contact' />
      <Route component={LoginForm} path='login' />
      <Route component={SignupForm} path='signup' />
      <Route component={NotFoundSection} path='*' />
    </Route>
);

Comments

नमस्ते! क्या आप अपनी routesपरिभाषाएँ पोस्ट कर सकते हैं , और यह भी कि क्या कारण है कि आप Linkघटक का उपयोग नहीं कर रहे हैं ? इसके अलावा, उल्लेख करें कि आपको क्या त्रुटियाँ हो रही हैं।

— इरोसिल

बटन के बजाय <Link to="/login">Log In</Link>,?

— इरोसिल

इसके अलावा आप किस रतिक्रिया-राउटर का उपयोग कर रहे हैं? प्रमुख संस्करणों के बीच प्रक्रियात्मक पुनर्निर्देशन के लिए कोड बदल गया है।

— mjhm

के लिए Uncaught ReferenceError, आप के रूप में बुला रहे हैं PropTypes, लेकिन आप उस आयात नहीं करते हैं, तो आप खुद या प्रयोग के रूप में PropTypes आयात की जरूरतReact.PropTypes

— aarosil

@JoshDavidMiller अच्छा बिंदु हालांकि मैं react-router5 मिनट के भीतर अति परिवर्तन को प्रभावित नहीं करूंगा .. हाहा मजाक कर रहा हूं , लेकिन आंशिक रूप से

— आर्सिल

Answer 1

सरल उत्तर के लिए, आप इसके बजाय Linkसे घटक का उपयोग कर सकते हैं । जेएस में मार्ग बदलने के तरीके हैं, लेकिन लगता है कि आपको यहां की आवश्यकता नहीं है।react-routerbutton

<span className="input-group-btn">
  <Link to="/login" />Click to login</Link>
</span>

प्रोग्राम को 1.0.x में ऐसा करने के लिए, आप अपने क्लिकहैंडलर फ़ंक्शन के अंदर इस तरह करते हैं:

this.history.pushState(null, 'login');

यहां अपग्रेड डॉक से लिया गया

आपको this.historyअपने मार्ग हैंडलर घटक पर रखना चाहिए react-router। यदि यह routesपरिभाषा में उल्लिखित बाल घटक के नीचे है , तो आपको उस नीचे और पास की आवश्यकता हो सकती है

Comments

यह शांत समाधान है, लेकिन इसका कारण है कि मैं इसका उपयोग नहीं कर रहा हूं, ऐसा इसलिए है क्योंकि मुझे पहले एक तरह का सत्यापन करने की आवश्यकता है, इसलिए मुझे इसे एक फ़ंक्शन में रखने की आवश्यकता है, जैसे: if (true) { // redirect to login}इसलिए मैंने इसे एक onClick में रखा है समारोह

— प्रतिक्रियाशील

आप JSX में भी ऐसा कर सकते हैं {validation && <Link to="/login" />Click to login</Link>}:। यदि सत्यापन गलत है, तो कुछ भी प्रस्तुत नहीं होगा।

— इरोसिल

मुझे पता है कि आपका क्या मतलब है, लेकिन मुझे वहां रहने के लिए बटन की आवश्यकता है, यदि सत्यापन सत्य है, तो पुनर्निर्देशित करें, अन्यथा एक त्रुटि संदेश उठना चाहिए।

— प्रतिक्रिया

@ उपनाम मैंने यह दिखाने के लिए अद्यतन किया कि यह जेएस में कैसे करता है

— आरोंसिल

> Uncaught TypeError: पढ़ा नहीं जा सकता संपत्ति की 'pushState' अपरिभाषित

— प्रतिक्रिया व्यक्त

Answer 2

1) प्रतिक्रिया-राउटर> V5 useHistoryहुक:

यदि आपके पास React >= 16.8और कार्यात्मक घटक हैं, तो आप useHistory प्रतिक्रिया-राउटर से हुक का उपयोग कर सकते हैं ।

import React from 'react';
import { useHistory } from 'react-router-dom';

const YourComponent = () => {
    const history = useHistory();

    const handleClick = () => {
        history.push("/path/to/push");
    }

    return (
        <div>
            <button onClick={handleClick} type="button" />
        </div>
    );
}

export default YourComponent;

2) प्रतिक्रिया-राउटर> V4 withRouterHOC:

जैसा कि @ambar ने टिप्पणियों में उल्लेख किया है, प्रतिक्रिया-राउटर ने अपने V4 के बाद से अपना कोड आधार बदल दिया है। यहाँ दस्तावेज हैं - आधिकारिक , withRouter

import React, { Component } from 'react';
import { withRouter } from "react-router-dom";

class YourComponent extends Component {
    handleClick = () => {
        this.props.history.push("path/to/push");
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick} type="button">
            </div>
        );
    };
}

export default withRouter(YourComponent);

3) प्रतिक्रिया-राउटर <V4 के साथ browserHistory

आप प्रतिक्रिया-राउटर का उपयोग करके इस कार्यक्षमता को प्राप्त कर सकते हैं BrowserHistory। नीचे कोड:

import React, { Component } from 'react';
import { browserHistory } from 'react-router';

export default class YourComponent extends Component {
    handleClick = () => {
        browserHistory.push('/login');
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClick} type="button">
            </div>
        );
    };
}

4) Redux connected-react-router

यदि आपने अपने घटक को redux से जोड़ा है, और कनेक्टेड-रिएक्शन-राउटर को कॉन्फ़िगर किया है this.props.history.push("/new/url");, जो आपको करना है, अर्थात, आपको घटक withRouterप्रॉपर को इंजेक्ट historyकरने के लिए HOC की आवश्यकता नहीं है ।

// reducers.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';

export default (history) => combineReducers({
    router: connectRouter(history),
    ... // rest of your reducers
});


// configureStore.js
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import createRootReducer from './reducers';
...
export const history = createBrowserHistory();

export default function configureStore(preloadedState) {
    const store = createStore(
        createRootReducer(history), // root reducer with router state
        preloadedState,
        compose(
            applyMiddleware(
                routerMiddleware(history), // for dispatching history actions
                // ... other middlewares ...
            ),
        ),
    );

    return store;
}


// set up other redux requirements like for eg. in index.js
import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router';
import { ConnectedRouter } from 'connected-react-router';
import configureStore, { history } from './configureStore';
...
const store = configureStore(/* provide initial state if any */)

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <> { /* your usual react-router v4/v5 routing */ }
                <Switch>
                    <Route exact path="/yourPath" component={YourComponent} />
                </Switch>
            </>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root')
);


// YourComponent.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
...

class YourComponent extends Component {
    handleClick = () => {
        this.props.history.push("path/to/push");
    }

    render() {
        return (
          <div>
            <button onClick={this.handleClick} type="button">
          </div>
        );
      }
    };

}

export default connect(mapStateToProps = {}, mapDispatchToProps = {})(YourComponent);

Comments

'BrowserHistory' जैसा लगता है कि अब प्रतिक्रिया-राउटर का हिस्सा नहीं है।

— 3

BrowserRouter का पुश फंक्शन नहीं है

— johnnyodonnell

@ambar @johnnyodonnell react-router-domकरता है

— toinetoine

यह सबसे अच्छा जवाब है। आपको इसे सही के रूप में चिह्नित करना चाहिए।

— सुलैमान बुश

Answer 3

प्रतिक्रिया-राउटर के साथ दूसरे मार्ग पर पुनर्निर्देशित कैसे करें?

उदाहरण के लिए, जब कोई उपयोगकर्ता लिंक पर क्लिक करता है तो <Link to="/" />Click to route</Link>प्रतिक्रिया-राउटर दिखेगा /और आप Redirect toउपयोगकर्ता को लॉगिन मार्ग की तरह कहीं और उपयोग कर सकते हैं और भेज सकते हैं ।

ReactRouterTraining के लिए डॉक्स से :

रेंडरिंग एक <Redirect>नए स्थान पर नेविगेट करेगा। नया स्थान इतिहास स्टैक में वर्तमान स्थान को ओवरराइड करेगा, जैसे सर्वर-साइड रीडायरेक्ट (HTTP 3xx) करते हैं।

import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

: स्ट्रिंग, URL को पुनर्निर्देशित करना।

<Redirect to="/somewhere/else"/>

को: ऑब्जेक्ट, पुनर्निर्देशित करने के लिए एक स्थान।

<Redirect to={{
  pathname: '/login',
  search: '?utm=your+face',
  state: { referrer: currentLocation }
}}/>

Comments

प्रदान किया गया समाधान एक त्रुटि फेंकता है <Redirect> elements are for router configuration only and should not be rendered।

— t1gor

Answer 4

वेब के लिए सबसे आसान समाधान!

दिनांक 2020 तक
काम करने की पुष्टि:

"react-router-dom": "^5.1.2"
"react": "^16.10.2"

उपयोग useHistory()हुक का !

import React from 'react';
import { useHistory } from "react-router-dom";


export function HomeSection() {
  const history = useHistory();
  const goLogin = () => history.push('login');

  return (
    <Grid>
      <Row className="text-center">          
        <Col md={12} xs={12}>
          <div className="input-group">
            <span className="input-group-btn">
              <button onClick={goLogin} type="button" />
            </span>
          </div>
        </Col>
      </Row>
    </Grid>
  );
}

Comments

बहुत बढ़िया, इसे करने के लिए हुक की तलाश थी! हालांकि मेरी आईडीई कहती है "प्रतीक का समाधान नहीं किया जा सकता ..." चेतावनी, यह काम करता है!

— राफेल मोनी

Answer 5

प्रतिक्रिया-राउटर v2.8.1 (शायद अन्य 2.xx संस्करणों के रूप में अच्छी तरह से, लेकिन मैंने इसका परीक्षण नहीं किया है) आप राउटर रीडायरेक्ट करने के लिए इस कार्यान्वयन का उपयोग कर सकते हैं।

import { Router } from 'react-router';

export default class Foo extends Component {

  static get contextTypes() {
    return {
      router: React.PropTypes.object.isRequired,
    };
  }

  handleClick() {
    this.context.router.push('/some-path');
  }
}

Comments

कभी-कभी: this.context.router.history.push ('/ some-path');

— 象

Answer 6

सबसे सरल उपाय है:

import { Redirect } from 'react-router';

<Redirect to='/componentURL' />

Comments

लेकिन मुझे एक त्रुटि मिल रही है: Invariant विफल: आपको <Router> के बाहर <Redirect> का उपयोग नहीं करना चाहिए

— Prateek Gupta

क्या आपने लपेटने की कोशिश की?

— जैकबोब