? ??? ??? ? ????? ???? ?? ? ?? ?? ??? ?? ????. ????? Gatsby?? ?? ??? URL? ?? ?? ???? ????? ??? ?????? ???? ????.

?? ???? ? ?? ??? ?? ?????. ??? ??, ??? ? ????? ??? ?? ???? ??? ?? ? ????.

?? URL? ??? ??

??? ??? ?? ? ???? ?? ?? ? ? ??? ?????. ? ?? ???? URL? ?? ????? ? ?? ?? ??? ?? ? ? ????.

?? ??

?? URL? ??? ? ?? ??? ?? ?? ??? ?? ?????.

 <link rel="canonical" href="%7Burl%7D">
<meta property="og : url" content="{url}">

?? ??

?? ???? ?? ??? ?? ?? ?? ???? ?? ? ????? ?????. ?? ?? ? (Creative Market?? ??)

????

??? ???? ??? ???? ???? ?? ? ? ??????. ?? ??? ?? ?? ???? ??? ? ? ????. ??? ?? ? ??? ??? ?? (?, ??? ??? URL ??) ? ? ????. ??? ?? ????.

 'React'?? React React;
'???? ???'?? ???? ? ??;

const ???? = ({path, children}) => (
  <styledlayout>
    {????}
  </styledlayout>
);
    
Const StyledLayout = Styled.Main`
  ??? : $ {({path}) => (path === '/'? '#fff': '#000')};
`;;

?? ???? ????;

???? ??? ???? ???? ?? ??? ???? ?? ??? ??????.

? ? ??? ?????? ?? ?? ?? ????? ????. ?? ??? URL? ???? ? ?? ??? ??? ?????. ??? ??? ??? ?????

?? ?? ? ???? ??????

??? ??? ????! ?? ??? ?? ? ??? ???? ?? ??? ???? ??? ???? ? ?? ?? ??? ??? ???? ????.

??? ???? ? ? ??? Gatsby? ?? ?? ?? ???? ?? ??? ????? ????. ?, ?? ?? (????? HTML ? JavaScript)? ????? ?? ?????. ???? ? ????? ??? ??????? ????. ?? ?? (?? ??? URL ??)? ?? ???? ?? ??? ?? ?? ???? ?? ?? ?? ?? ??? ?? ????????.

??? ??? ???? ? ? ?? ??? ???? ????? : ?? ?? ? ???. ?? ??? ??? ?? ?? ?? ????. ??? ??? ? ??? ????.

???? ???? ?? ?? ??? ? ??? ??? ?????. ? ?? ???? ?? ??? URL? ???? Window API? ???? ?? ??? ???? API? ??? ? ? ????.

???? ?? ? ??? ?? ???? ??? ? ?? ???? ????? ???? ?? ????? ?? ???? ????. ?, Window Object Work? ?? ?? ??? ???? ??? ???? ????.

Gatsby Build ??? ???? ??? ??? Gatsby?? ?? ??? ? ??? ????? ?? ? ? ?? ??? ?????. ?? ???? ????? ???? ????. ??? ??? ? ??? ??? ? ??? ?? ?????.

?? a-ha? ??! ??. ??? ?????? ???? ?? URL? ?? ??? ?? ? ????????? ?? Gatsby? ??? ???? ??? ??? ??????? ?? ?? ??. ???? ??? ?? ??? ?? ? ??? ?? URL? ???? ? ?? ????. ??? ??? ???????.

??? ?? ???? ?????, ???? WordPress ???? ???? ?? ??? ??? ?? ?? ? ??? ?? ? ????. Gatsby? ????? ?? ?? ?? ??? ????? ?? ?? ????. ??? ????.

?? ??? ?? ???? ?? ???? URL? ???? ?? ???? ?????.

?? 1 : Window.location ??? HREF ?? ??

? ? ?? ??? Gatsby?? ???? ??? ????? ?? ?? JavaScript ?? ?????? ??? ? ????. ????? ??? ?? ?????.

?? ???? URL? ?? ???? ?? ??? ?? ?? ?? ?? ? ??? ????? ?? ? ???. ??? ??? ?? ?????.

 'React'?? React React;

const foo = () => {
  const url = typeof window! == 'undefined'? Window.location.href : '';

  ?? (
    
  );
};

?? ?? FOO;

? ??? ??? ?? ?? ? ?? ??? HREF ??? ????. ??? ?? ?? URL ??? ? ??? ?? ?????.

???? ???? ??? ?? ???.

 const url = window.location.href;

… ??? ??? ?? ??? ??? ?????.

 ??? ? ?? HTML? ???? ????? -2.431
?? #95312 
?? ? ??? ?? "?"? ??? ? ????.

??? ????? ????? ?? ?? ?? ???? ?? ??? ?????. ???? ??? ? ?????. ???? ?? ??? URL? ??? ?? ??? ? ????.

??? ? ??? ????! ?? ?? ?? ??? ??? ?? ? ?? ???? ? ??? ??? ? ? ????. ?? ??, ?? ?? ???? URL ??? ?? ??? ????.

?? 2 : ???? ?? ???? HREF ??? ?????.

Gatsby? ?? ??? ? ??? ?? ???? ?? ???? ?? ??? ?? ? ?? ??? ????. ??? Window.location? ??? ??? ?? ???? ????.

??? ?? ?? :

?? ?? ?? ?? ????? ?? ??? ??? ? ??? ????.

??? ??? ????? ? ????. Gatsby? ?? ???? ?? ?? ??? ??? ????? Window.location? ?? ???? ???? HREF ??? ???? ??? ? ? ????. ??? ??? ?????? ??, ??? ????. HREF ??? ??? ?? ? ????.

??? ?? ??? ?? ??? ?? ???? ?? ?? ??? ???? ?? ?? ?? ??? ???? ???? ????.

? ?? ?? ??? ?? ???? ??? ?? ??? ?? ? ? ??? ?? ?? ?? HREF ??? ?? ??? ??? ?? ????. ?? ?? ???,? ??? ???? ?? ??? ?? ?? ????? ??? ?? ?? ??? ???? ????.

? ??? ???? ?? ??? ?? ??? ???.

 'React'?? React React;

const page = ({location}) => {
  const url = location.href? location.href : '';

  ?? (
    
  );
};

???? ?? ???;

??? ??? ??? ?? ??? ?? ?? ?????. ???? ?? ?? ????? ??? ? ????. ?? ??? ???? ????.

?????,? ??? ?? ??? ?? ?????. URL? ??? ?? ? ??? ??? ??????.

??? ?? ???? ?? ?? ?? URL? ??? ?? ????????? ? ?? ???? ?? ???.

?? 3 : ?? ????? PathName ???? ?? ??? URL? ?????.

? ???? ?? ???? ????? ?? ???? ?? URL? ??????? ?? ? ???? ?? URL? ???? ???? ?? ?? ?? ??? ? ???????. ????? ??? ?? ??????.

?? ??, ???? ??? ??????. ???? ????? ?? ?? ?? ??? URL? ???? ?? ?????. ??? ??? ?? ??? ??? ?????? ? HREF ??? ? ? ????.

??? ?????.

1. gatsby-config.js? siteemetAdata? siteUrl ??? ??????.
2. ?? ?? ???? SiteMetAdata? ????? ?? ?? ??? ????.
3. ? ??? ???? siteUrl? ?????.
4. ???? ??? ???? ?? ?? ??????.

? ??? ?? ???.

gatsby-config.js? siteemetAdata? siteUrl ??? ??????

Gatsby?? Gatsby-config.js?? ?? ??? ??? SiteemetAdata ?? ??? ???? ?? ??? ??? ???? ? ??? ? ????. ??? ???? ??? ???? ?? ??? SiteUrl? ?? ? ????.

 module.exports = {
  siteemetadata : {
    ?? : 'Dmitry Mayorov',
    ?? : 'Dmitry? ?? ???? ???? ??? ?? ??????.',
    ?? : '@dmtrmrv',
    siteurl : 'https://dmtrmrv.com',
  }
};

?? ?? ???? SiteMetadata? ????? ?? ?? ?? ??

???? ?? ???? SiteMetadata? ???? ??? ?????. ? ??? Gatsby? ?? API? ????? ??? ??? ? ? ????. ???? ??? usestaticquery hook? ?? ??? ? ??? ? ????? ???? ? ?? ??? ?? ??? ??? ??? ?? ????. ?? ?? ??? ?? ?? ? ????.

?? ?? ???? SRC ?? ??? ?? ?? ???? use-site-metadata.js?? ??? ???? ?? ??? ???? ?? ?????.

 '???'?? {usestaticquery, graphql} import;

const usatesitemetadata = () => {
  const {site} = usestaticquery (
  ??? QL
    ?? {
    ??? {
      siteemetadata {
      ??
      ??
      ??
      siteUrl
      }
    }
    }
  `,
  );
  Return Site.SitemetAdata;
};

???? ?? useitemetAdata;

??, ??, ?? ? SiteemetAdata ????? ?? ??? ?? ?? ??? GraphQL ??? ????? ??????.

? ??? ???? siteUrl? ?????

???? ??? ??? ????. ??? ??? URL? ?? ?? ?? ?? ??? ?????.

 'React'?? React React;
'React-Helmet'?? ?? ?? ??;
'../hooks/use-site-metadata'?? avest usatesitemetadata;

const page = ({location}) => {
  const {siteurl} = useitemetadata ();
  ?? (
    
      <link rel="canonical" href="%7B%60%24">
    ??>
  );
};

???? ?? ???;

?????.

3 ??? ??? ?? ??? ?? useitemetadata ??? ?????.

 '../hooks/use-site-metadata'?? avest usatesitemetadata;

?? ?? 6 ??? ??? ? ???? ???? SiteUrl ??? ?????. ?? ?? ? ??? ?? ??? ??? ??? URL? ????. ???!

 const {siteurl} = useitemetadata ();

??? URL? ??? ??? ???? ?? ?? ??????.

?? ? ?? ??? ?? ??? ??????? ??? ?? ? ??? ?? ? ??? ?? PathName ??? ????? ????. ??? ?? ??? ??????? ????? ? ?? ? ??? ???? ????.

 `$ {siteurl} $ {location.pathname}`

??? ??? ?????? ??? ?? ???? ???? ?? ??? ??? ? ????. ?? ??? ??? ??? ?? ?? ?????.

? ???? React Helmet? ???? ????. ?? ? ?? ??? React Applications?? ?? ??? ????? ?????. Darrell Hoffman? CSS- ??? ?? ?? ??? ????.

?? 4 : ?? ??? ?? ??? URL? ?????.

???! ?? ???? ????? Gatsby? ?? ??? ???? ???? ?, ???? ?????. ??? ??? ???? ??? ??? ????.

?? ?? ??? Gatsby? ?? ?? ?? ?? ???? ?????. ??? ??? ?? ????. ? ?? Gatsby? ?? ???? ?? API? ???? ?? ????? ??? ? ??? ????.

???? ?? ????? API? Onrenderbody?? ????. ???? ?? ??? ?? ????? ???? ???? ???? ? ?????. ??? ?? (? ?? ?? ? API)?? ???? ?? PathName ?? ??? ??? ????. ?, "????"?? ??? URL? ?? ? ? ????.

? ??? ????? ???? ?? ??? ?? ??? ???? ?????. ? ?? ??? ? ???? ?????. ??? ?? ??, Onrenderbody? ???? ???? ?? ??? ?? ? ??? ??? ?? ??????.

?? ? API? ????? ???? ?? ????? Gatsby-SSR.JS?? ??? ??? ???????. ?? ??? ??? ????? ??? ?? ??? ?????.

 const react = require ( 'react');
const config = require ( './ gatsby-config');

Exports.onrenderbody = ({pathName, setheadcomponents}) => {
  ?? ?? (
    <link rel="canonical" href="%7B%60%24">,
  ]);
};

? ??? ??? ???????.

1 ?? ??? ?????. JSX ??? ????????. ?? ?? 2 ??? Gatsby-config.js ??? ???? ?? ??? ?????.

????, ??? Onrenderbody ??? SetheadComponents ???? ???? ??? ??? ?? ? ?? ?? ??? ?????. ??? ??, ??? ?? ??? ?? ?????. ??? ?? ??? HREF ??? ?? SiteUrl? PathName? ?????.

 `$ {config.sitemetadata.siteurl} $ {pathname}`

?? ????, ??? ??? ?? ??? ??? ???? ??? ???? Gatsby?? ?? ??? ???? ?? ???? ?? URL? ?? ? ??? ?? ? API? ??? ?? ?? ????.

Gatsby?? ?? ? ???? ?? ??? ?? ??? ?? ??? ?? ??? ????.

?? ??!

?????, Gatsby?? ?? ???? URL? ?? ?? ??? ???? ????. ?? ?? ??? ???? ??? ??? ??? ?? ?? ???? ????. ?? ??? ?? ??? ??? ??????!

??

• JavaScript ? ?????
• ??? ?? ????? ??
• ??? ?? ???
• ??? ?? ??? API
• ?? ??

? ??? Gatsby?? ?? ??? URL? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!