11 reactjs next.js react-helmet
我正在制作下一个 js 应用程序(React SSR),现在我要在 head 中实现元标记。
所以现在我在 _app.tsx 文件中使用了next/head,例如,
import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../src/theme';
export default class MyApp extends App {
componentDidMount() {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement!.removeChild(jssStyles);
}
}
render() {
const { Component, pageProps } = this.props;
return (
<React.Fragment>
<Head>
<title>My page</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</React.Fragment>
);
}
}
Run Code Online (Sandbox Code Playgroud)
整个工作代码可以在沙箱中找到:https : //codesandbox.io/s/interesting-tereshkova-217ks
我只是想知道next/head在下一个 js 应用程序中是否足够使用它自己,否则需要实现react-helmet?
如果react-helmet需要,请帮助我如何在提供的下一个 js 应用程序中实现。
我是 Next Js 和 SSR 的新手,所以请帮助我找到正确的方向,这是实现结果的最佳方法。
Dmi*_*sky 14
我只是想知道在下一个 js 应用程序中使用 next/head 本身是否足够,否则需要实现 react-helmet ?
如果您正在推出自己的服务器端渲染解决方案并且不使用 Next.js,那么使用 react-helmet 是有意义的。据我所知,next/head基本上是 react-helmet 的内置版本,并且可以完成 react-helmet 所做的一切。
所以不,如果您使用 Next.js,则不需要使用 react-helmet。只需使用next/head.
如果需要反应头盔,请帮助我如何在提供的下一个 js 应用程序中实现。
也就是说,如果你想在 Next.js 中使用 react-helmet,这里有一个例子:https : //github.com/zeit/next.js/tree/canary/examples/with-react-helmet。不知道你为什么要这样做,但这个例子存在。有一些关于它的讨论。
顺便说一句,就像 react-helmet 一样,您可以next/head在渲染树中的任何地方使用——不仅仅是App像示例中的组件——并且所有标签都将聚合到<head>顶部的标签中。
| 归档时间: |
|
| 查看次数: |
6536 次 |
| 最近记录: |