ฉันกำลังพยายามทำ A SIMPLE โดยใช้ react-router ( เวอร์ชัน ^ 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;

สิ่งที่ฉันต้องการคือส่งการใช้งานไปที่ '/ login' เท่านี้

ฉันจะทำอะไรได้บ้าง?

ข้อผิดพลาดในคอนโซล:

Uncaught ReferenceError: 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>
);

สำหรับคำตอบง่ายๆที่คุณสามารถใช้Linkส่วนประกอบจากแทนreact-router buttonมีหลายวิธีในการเปลี่ยนเส้นทางใน JS แต่ดูเหมือนว่าคุณไม่จำเป็นต้องใช้ที่นี่

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

หากต้องการทำแบบเป็นโปรแกรมใน 1.0.x ให้ทำดังนี้ภายในฟังก์ชัน clickHandler ของคุณ:

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

นำมาจากเอกสารการอัปเกรดที่นี่

คุณควรจะได้วางไว้ในส่วนเส้นทางของคุณโดยการจัดการthis.history react-routerหากเป็นองค์ประกอบลูกที่อยู่ภายใต้ที่กล่าวถึงในroutesคำจำกัดความคุณอาจต้องผ่านสิ่งนั้นต่อไป

1) react-router> V5 useHistoryhook:

ถ้าคุณมี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 กล่าวไว้ในความคิดเห็น React-router ได้เปลี่ยนฐานรหัสตั้งแต่ V4 นี่คือเอกสาร - อย่างเป็นทางการกับเราเตอร์

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) React-router <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");คือคุณไม่จำเป็นต้องใช้withRouterHOC เพื่อฉีด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);

จะเปลี่ยนเส้นทางไปยังเส้นทางอื่นด้วย react-router ได้อย่างไร?

ตัวอย่างเช่นเมื่อผู้ใช้คลิกลิงค์<Link to="/" />Click to route</Link>react-router จะค้นหา/และคุณสามารถใช้Redirect toและส่งผู้ใช้ไปที่อื่นเช่นเส้นทางการเข้าสู่ระบบ

จากเอกสารสำหรับReactRouterTraining :

การแสดงผล<Redirect>จะนำทางไปยังตำแหน่งใหม่ ตำแหน่งใหม่จะแทนที่ตำแหน่งปัจจุบันในกองประวัติเช่นเดียวกับการเปลี่ยนเส้นทางฝั่งเซิร์ฟเวอร์ (HTTP 3xx)

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

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

to: string, URL ที่จะเปลี่ยนเส้นทางไป

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

ถึง: object, ตำแหน่งที่จะเปลี่ยนเส้นทางไป

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

ทางออกที่ง่ายที่สุดสำหรับเว็บ!

ถึงวันที่ 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>
  );
}

ด้วย react-router 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');
  }
}

ทางออกที่ง่ายที่สุดคือ:

import { Redirect } from 'react-router';

<Redirect to='/componentURL' />