diff --git a/types/react-router/index.d.ts b/types/react-router/index.d.ts index 62c80aef8f..9835c3f348 100644 --- a/types/react-router/index.d.ts +++ b/types/react-router/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for React Router 4.4 +// Type definitions for React Router 5.0 // Project: https://github.com/ReactTraining/react-router // Definitions by: Sergey Buturlakin // Yuichi Murata @@ -21,6 +21,7 @@ // Ben Smith // Wesley Tsai // Sebastian Silbermann +// Nicholas Hehr // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 @@ -137,3 +138,5 @@ export function generatePath(pattern: string, params?: { [paramName: string]: st // you will see a bunch of errors from TypeScript. The current workaround is to use withRouter() as a function call // on a separate line instead of as a decorator. export function withRouter

>(component: React.ComponentType

): React.ComponentClass>>; + +export const __RouterContext: React.Context; diff --git a/types/react-router/test/RouterContext.tsx b/types/react-router/test/RouterContext.tsx new file mode 100644 index 0000000000..af43262194 --- /dev/null +++ b/types/react-router/test/RouterContext.tsx @@ -0,0 +1,113 @@ +import * as React from "react"; +import { __RouterContext as RouterContext } from "react-router"; +import { + BrowserRouter as Router, + Link, + Route, + RouteComponentProps +} from "react-router-dom"; + +const App = () => ( + +

+
    +
  • + SignUp Page +
  • +
+ + +
+ +); + +const Welcome: React.FC = () => ( +

Welcome to this site!

+); + +const Signup: React.FC = () => ( +
+

Signup for this site

+

Just a few steps to complete this process.

+ Get Started + +
+); + +const steps = ["username", "password", "basic_info"]; + +const MultiStepSignup: React.FC = () => { + const { history, location, match } = React.useContext(RouterContext); + + const { currentStep, currentStepIndex, isLastStep } = React.useMemo(() => { + const currentStep = location.pathname.split("/").pop() || ""; + const currentStepIndex = steps.indexOf(currentStep); + + return { + currentStep, + currentStepIndex, + isLastStep: currentStepIndex === steps.length - 1 + }; + }, [location.pathname]); + + const handleNextStep = React.useCallback( + event => { + event.preventDefault(); + + if (isLastStep) { + // submit data to api here + history.push("/welcome"); + } else { + // go to next step + const nextStep = steps[currentStepIndex + 1]; + history.push(`/signup/${nextStep}`); + } + }, + [currentStep] + ); + + return ( +
+ + + + + + + ); +}; + +const UsernameStep: React.FC = () => ( +
+

Pick out a fun username!

+ +
+); + +const PasswordStep: React.FC = () => ( +
+

Pick out a secure password!

+ +
+); + +const BasicInfoStep: React.FC = () => ( +
+

Just some basic information to finish up.

+ + +
+); diff --git a/types/react-router/tsconfig.json b/types/react-router/tsconfig.json index d62619d931..7e74a814b4 100644 --- a/types/react-router/tsconfig.json +++ b/types/react-router/tsconfig.json @@ -39,6 +39,7 @@ "test/MemoryRouter.tsx", "test/Switch.tsx", "test/InheritingRoute.tsx", - "test/WithRouter.tsx" + "test/WithRouter.tsx", + "test/RouterContext.tsx" ] } \ No newline at end of file