React Router

/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      p: "p"
    }, _provideComponents(), props.components);
    return _jsx(_components.p, {
      metastring: "",
      children: "true"
    });
  }
}
return {
  default: MDXContent
};


/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      p: "p"
    }, _provideComponents(), props.components);
    return _jsx(_components.p, {
      metastring: "",
      children: "false"
    });
  }
}
return {
  default: MDXContent
};


/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      p: "p"
    }, _provideComponents(), props.components);
    return _jsx(_components.p, {
      metastring: "",
      children: "Nothing"
    });
  }
}
return {
  default: MDXContent
};


/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      p: "p",
      code: "code"
    }, _provideComponents(), props.components);
    return _jsxs(_components.p, {
      metastring: "",
      children: [_jsx(_components.code, {
        metastring: "",
        inline: true,
        children: "Navigate"
      }), " should be ", _jsx(_components.code, {
        metastring: "",
        inline: true,
        children: "Redirect"
      })]
    });
  }
}
return {
  default: MDXContent
};


/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      p: "p",
      code: "code"
    }, _provideComponents(), props.components);
    return _jsxs(_components.p, {
      metastring: "",
      children: ["We should use ", _jsx(_components.code, {
        metastring: "",
        inline: true,
        children: "navigate"
      }), " isntead of ", _jsx(_components.code, {
        metastring: "",
        inline: true,
        children: "<Navigate />"
      })]
    });
  }
}
return {
  default: MDXContent
};


/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      p: "p",
      code: "code"
    }, _provideComponents(), props.components);
    return _jsxs(_components.p, {
      metastring: "",
      children: ["Nothing, but we should pass ", _jsx(_components.code, {
        metastring: "",
        inline: true,
        children: "location.pathname"
      }), " via ", _jsx(_components.code, {
        metastring: "",
        inline: true,
        children: "state"
      }), " to ", _jsx(_components.code, {
        metastring: "",
        inline: true,
        children: "/login"
      })]
    });
  }
}
return {
  default: MDXContent
};


/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      pre: "pre",
      code: "code"
    }, _provideComponents(), props.components);
    return _jsx(_components.pre, {
      metastring: "",
      children: _jsx(_components.code, {
        className: "language-jsx",
        metastring: "",
        children: "<Route\n  path=\"/dashboard\"\n  element={\n    <RequireAuth>\n      <Dashboard />\n    </RequireAuth>\n  }\n/>\n"
      })
    });
  }
}
return {
  default: MDXContent
};


/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      pre: "pre",
      code: "code"
    }, _provideComponents(), props.components);
    return _jsx(_components.pre, {
      metastring: "",
      children: _jsx(_components.code, {
        className: "language-jsx",
        metastring: "",
        children: "<RequireAuth\n  to='/dashboard'\n  element={<Dashboard />}\n/>\n"
      })
    });
  }
}
return {
  default: MDXContent
};


/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      pre: "pre",
      code: "code"
    }, _provideComponents(), props.components);
    return _jsx(_components.pre, {
      metastring: "",
      children: _jsx(_components.code, {
        className: "language-jsx",
        metastring: "",
        children: "<Route\n  path=\"/dashboard\"\n  element={\n    <RequireAuth component={Dashboard}/>\n  }\n/>\n"
      })
    });
  }
}
return {
  default: MDXContent
};


/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      pre: "pre",
      code: "code"
    }, _provideComponents(), props.components);
    return _jsx(_components.pre, {
      metastring: "",
      children: _jsx(_components.code, {
        className: "language-jsx",
        metastring: "",
        children: "<RequireAuth\n  path=\"/dashboard\"\n  element={\n    <Route>\n      <Dashboard />\n    </Route>\n  }\n/>\n"
      })
    });
  }
}
return {
  default: MDXContent
};


(Quiz) Protected Routes

(Practice) Protected Routes

Protected Routes

The Fundamentals

(Quiz) The Fundamentals

(Practice) The Fundamentals

(Solution) The Fundamentals

(Project) Introduction

(Project) Initial Routes

URL Parameters

(Quiz) URL Parameters

(Practice) URL Parameters

(Solution) URL Parameters

(Project) Home

Query Strings

(Quiz) Query Strings

(Practice) Query Strings

(Solution) Query Strings

(Project) Team Page

Customizing React Router's Link Component

(Quiz) Customizing Link

(Practice) Customizing Link

(Solution) Customizing Link

(Project) Players

Customizing Link

Nested Routes

(Quiz) Nested Routes

(Practice) Nested Routes

(Solution) Nested Routes

(Practice) Nested Routes - Outlet

(Solution) Nested Routes - Outlet

Project - Player

(Project) Team

(Project) Articles

(Project) Loading

Programmatically Navigate

(Quiz) Programmatically Navigate

(Practice) Programmatically Navigate - Declarative

(Solution) Programmatically Navigate (Declarative)

(Practice) Programmatically Navigate - Imperative

(Solution) Programmatically Navigate (Imperative)

(Project) Navigate

Code Splitting

(Quiz) Code Splitting

(Practice) React.lazy

(Solution) React.lazy

(Project) Code Splitting

Route Configs

(Quiz) Route Configs

(Practice) Route Configs

(Solution) Route Config

(Project) Config

Animated Transitions

(Solution) Protected Routes

Handling 404 Pages

(Quiz) Handling 404 Pages

(Practice) Catch All Routes

(Solution) Catch All Routes

404 Pages

Passing Props to Link

(Quiz) Passing Props to Link

(Practice) Passing Props to Link

(Solution) Passing Props to Link

Sidebars

(Quiz) Sidebars

(Practice) Sidebars

(Solution) Sidebar

Preventing Transitions

Passing Props to React Router Components

Recursive Paths

Server Rendering

Bonus

Outro + Next Steps

Outro