Do I need to add GTM initializing(the following code) for every page?
Or Do I just need to add that at only the app.js file?
import TagManager from 'react-gtm-module'
const tagManagerArgs = {
gtmId: 'GTM-000000',
events: {
sendUserInfo: 'userInfo'
}
}
TagManager.initialize(tagManagerArgs)
You just need to initialize it once in the app.js file.
You only need to initialize the GTM code once and then use TagManager.dataLayer() to send you data on the page you need.
You can read more in the document with sample code.
https://www.npmjs.com/package/react-gtm-module#datalayer
Related
I have created a react app in which I have created a .env file and in this I have declared a URL which I have to use globally in my appplication.
.env file:-
NODE_ENV=development
REACT_APP_BASE_URL = "http://localhost:8082"
Now I have used this URL in this way where I want to use it.
window.location.href = `${process.env.REACT_APP_BASE_URL}`;
In the same way I have to use this URL in some JSON files, but there I am unable to use this URL in the following way which I declared above.
So how this URL can be used in a JSON file?
There is no direct way to use variables inside a JSON file. But you can use placeholders and then replace them with the value you want.
for example:
{
apiURL: "$(API_END_POINT)"
}
and then inside React you can load the data and replace the variables with the ones you wanted
import jsonFile from "./jsonfile.json"
const Component = () => {
useEffect(() => {
JSON.strigify(jsonFile).replace("$(API_END_POINT)",
proces.env.REACT_APP_API_URL)
},[]}
/*
...Rest of the code
*/
}
I am trying to create a Nextra page inside my Nextjs project and I am doing the process manually since I am implementing this on something that is already done. But every time I create a page with .md extension I get a blank page with this code write on it:
import withLayout from 'nextra-theme-blog' import { withSSG } from 'nextra/ssg' import layoutConfig from '/Users/xxxxxx/xxxxxx/theme.config.js'
export default function NextraPage (props) { return withSSG(withLayout({ filename: "test.md", route: "/test", meta: {}, pageMap: [{"name":"test","route":"/test"}] }, layoutConfig))(props) }
Could someone help me with why is this happening? Or give me another plugin that could offer a similar solution?
Note 1: I am using Chakra UI and Next Js.
Note 2: I am trying to create a simple "docs" page on my website, just like in this example:
https://nextra.vercel.app/
Does someone have some extra info about defineRoutes function in remix.config?
I have a this route:
{
"id": "routes/__main/city/$city", "path": "/city/:city",
"file":"routes/__main/city/$city.tsx"
}
and in defineRoutes I made something like this:
routes: async (defineRoutes) => {
return defineRoutes((route) => {
route("/citta/:city", "routes/__main/city/$city.tsx");
});
},
I want that both /citta/test and /city/test will go on the same file located here routes/__main/city/$city.tsx.
But when I run the code only the /citta/test route is active the other one /city/test will throw error.
As I read from the docs here https://remix.run/docs/en/v1/api/conventions#routes, what I want to achive should be possible.
Have I misunderstood the use of defineRoutes?
This can be solved without the use of defineRoutes. Revert your remix.config changes and let Remix handle the routing for you by placing your routes within app/routes.
Move routes/__main/city/$city.tsx in your app directory and add an additional folder structure app/routes/__main/citta/$city.tsx. So you have two folders /city and /citta next to each other. They will share all the nested routing that you introduced with __main.
Export the following from your app/routes/__main/citta/$city.tsx file:
import CityComponent from '~/routes/__main/city/$city';
// re-export loader, action, and all other functionality
export * from '~/routes/__main/city/$city'
// re-use the default export from your other route
export default CityComponent;
This lets you reuse the code from your city/$city.tsx file in citta/$city.tsx.
Note: Make sure to name both files in citta/ and city/ $city.tsx to avoid naming discrepancies. Otherwise your re-exported loader and action won't work as the parameter name differs.
I recently tried to colocate all my code in modules and re-export the page components from app/routes like this:
import LoginPage, from "~/modules/auth/LoginPage";
export * from "~/modules/auth/LoginPage";
export default LoginPage;
but I ran into React 18 hydration issues. The working solution for me was re-exporting this way:
import LoginPage, { action, loader } from "~/modules/auth/LoginPage";
export { action, loader };
export default LoginPage;
I have have a large application that monitors a file called routes.js . I can not change the file name or mess with routes.js at all. I need to load another file based on a useState variable from another component when a condition is met. This following code will need to be put in Apps.js example:
if (!change) {
import routes from "routes";
} else {
import routes from "newroutes"
}
Is this possible?
You can just alias the imports.
import routes_1 from "routes";
import routes_2 from "newroutes"
Then, you can just declare a variable: routes and assign the appropriate value to it.
routes = !change ? routes_1 : routes_2;
It's possible to do using Webpack lazy loading (if you build your app using Webpack):
import(/* webpackChunkName: "routes" */ './routes').then(module => {
const routes = module.default;
});
But probably you will need to adjust your build config. Also this import is returning a promise, so you should write your code in the callback.
Update: but in your case it seems you don't need it. You could do something like this:
import file1 from 'routes'
import file2 from 'newroutes'
let routes = file1
if (change) {
routes = file2
}
So you will have your routes variable unchanged
Im currently trying to use the history.push() object from:
https://github.com/ReactTraining/history
Im having problem to change last's URL of browser when the browser's back button is clicked.
When I use the history.push(...) the current browser's URL changes; there is a way to avoid this? Or just using window object I can make this work?
My application is not a Single Page-Application; the code:
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
const testUrl = 'http://test.com'
history.push(testUrl);
window.addEventListener('popstate', (event) => {
history.go(testUrl);
});
You could use pushState or replace. pushState adds a new entry, whereas replace modifies the current.
#see https://developer.mozilla.org/de/docs/Web/Guide/DOM/Manipulating_the_browser_history
as I can see from your module history/createBrowserHistory, you are using this module, which should be fully compatible with the native implementation.