কীভাবে প্রতিক্রিয়া-রাউটার দিয়ে অন্য রুটে পুনর্নির্দেশ করবেন?

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;

আমার কেবল দরকারটি '/ লগইন' এ ব্যবহারটি প্রেরণ করা এবং এটিই।

আমি কি করতে পারি ?

কনসোলে ত্রুটিগুলি:

আনকড রেফারেন্স এরিয়ার: প্রোপটাইপগুলি সংজ্ঞায়িত করা হয়নি

আমার রুট দিয়ে ফাইল

// 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, তবে আপনি এটি আমদানি করবেন না, আপনার নিজের মতো প্রপটাইপগুলি আমদানি করতে হবে বা ব্যবহার করতে হবেReact.PropTypes

— অ্যারোসিল

@ জোশা ডেভিডমিলার ভাল কথা তবে আমি 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}তাই এই কারণেই আমি এটি অনক্লিকটিতে রেখেছি ফাংশন

— প্রতিক্রিয়া

এছাড়াও আপনি যে কাজ করতে পারেন JSX মধ্যে: {validation && <Link to="/login" />Click to login</Link>}। যদি বৈধতা মিথ্যা হয় তবে কিছুই রেন্ডার হবে না।

— অ্যারোসিল

আপনি কী বলতে চাইছেন তা আমি জানি, তবে সেখানে থাকা বোতামটি আমার দরকার, যদি বৈধতা সত্য হয় তবে পুনঃনির্দেশ করুন, অন্যথায় একটি ত্রুটি বার্তা উপস্থিত হওয়া উচিত।

— প্রতিক্রিয়া

@ দ্য নামযুক্ত আমি জেএস

— এ্যারোসিল

> আনকাচড টাইপ এরির: অপরিজ্ঞাতকৃত সম্পত্তি 'পুশস্টেট' পড়তে পারে না

— প্রতিক্রিয়া

Answer 2

1) প্রতিক্রিয়া-রাউটার> ভি 5 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) প্রতিক্রিয়া-রাউটার> ভি 4 withRouterএইচওসি:

@Ambar মন্তব্যে উল্লিখিত হিসাবে, প্রতিক্রিয়া-রাউটার তাদের ভি 4 এর পরে তাদের কোড বেসটি পরিবর্তন করেছে। এখানে নথি রয়েছে - সরকারী , 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) প্রতিক্রিয়া-রাউটার <ভি 4 সঙ্গে 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) রেডাক্স connected-react-router

আপনি যদি নিজের উপাদানটি রিডুএক্সের সাথে সংযুক্ত করেছেন, এবং সংযুক্ত-প্রতিক্রিয়া-রাউটারটি আপনাকে যা করতে হবে তা হ'ল this.props.history.push("/new/url");, আপনাকে উপাদান প্রপসগুলিতে withRouterইনজেক্ট historyকরার জন্য এইচওসি দরকার নেই ।

// 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

'ব্রাউজারহিসটরি'র মতো মনে হচ্ছে এটি আর রিঅ্যাক্ট-রাউটারের অংশ নয়।

— অ্যাম্বার

ব্রাউজাররউটারের একটি পুশ ফাংশন নেই

— johnnyodonnell

@ambar @ জোজনিওডোনেল react-router-domকরেন

— টয়নেটয়েইন

এটি সেরা উত্তর। আপনার এটিকে সঠিক হিসাবে চিহ্নিত করা উচিত।

— সলোমন বুশ

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

দুর্দান্ত, এটি করার হুক উপায় খুঁজছিল! যদিও আমার আইডিইতে "প্রতীক সমাধান করা যায় না ..." সতর্কতা বলা হয়েছে, এটি কার্যকর!

— রাফায়েল মনি

দুর্দান্ত, এটিই আমি খুঁজছিলাম এবং এটি এখানে কাজ করে

— nanquim

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 ('/ কিছু-পথ');

— 嘉

Answer 6

সহজ সমাধানটি হ'ল:

import { Redirect } from 'react-router';

<Redirect to='/componentURL' />

Comments

তবে আমি একটি ত্রুটি পাচ্ছি: আক্রমণকারী ব্যর্থ হয়েছে: আপনি <রাডার> এর বাইরে <পুনর্নির্দেশ> ব্যবহার করা উচিত নয়

— প্রীতেক গুপ্ত

আপনি মোড়ানোর চেষ্টা করেছেন?

— জ্যাককোবেক