I am having below js file in react application
const Header = (props) => {
const pathName = props?.location?.pathName;
return (
//html
);
};
export default withRouter(Header);
Here pathName always comes as undefined, and because of which page redirection is not happening.
Console has below errors
Here is my package versions
"react": "^18.2.0",
"react-bootstrap": "^2.7.2",
"react-dom": "^18.2.0",
"react-router": "^6.8.1",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
You should be using location.pathname not location.pathName.
Related
Why do I keep encountering this error when using the Grid of MUI in my react component
this is the whole code of the component
import React from "react";
import Grid from "#mui/material/Grid";
const Footer = () => {
return (
<footer>
<Grid container spacing={2}>
<Grid item xs={6} md={8}>
hasdsadsa
</Grid>
</Grid>
</footer>
);
};
export default Footer;
but once I comment the Grid Tag below the program runs fine
package.json
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.2",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
I'm attempted to develop a new feature for my blog, that is a Markdown editor for writing articles.
I chosed #tailwindcss/typography and markdown-it to do that, so this is my whole dependencies:
package.json
{
"dependencies": {
"firebase": "^9.0.0-beta.7",
"markdown-it": "^12.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"#tailwindcss/typography": "^0.4.1",
"autoprefixer": "^10.3.2",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"dotenv-webpack": "^7.0.3",
"html-webpack-plugin": "^5.3.2",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"postcss-loader": "^6.1.1",
"style-loader": "^3.2.1",
"tailwindcss": "^2.2.7",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"
}
}
Below code is the component for this feature, including a editing area and a preview area. However, it didn't work.
When I run this code, it is rendered out like this, without typographing the <h1> tag.
However, if I repalce md.render(markdown) with <h1>hello</h1>(the markdown-it's rendering result), it seems "work", looking like this.
Editor.jsx
import React, { useState } from "react";
const md = require("markdown-it")('commonmark');
const Editor = () => {
const [markdown, setMarkdown] = useState("# hello");
const onTextChange = (e) => {
setMarkdown(e.target.value);
}
return (
<div>
<form>
<textarea onChange={(e) => onTextChange(e)}>
{markdown}
</textarea>
</form>
<div id="preview" className="prose">
{md.render(markdown)} {/* <h1>hello</h1> */}
</div>
</div>
)
}
export default Editor;
Why these things happened? and how can I make it run with expections?
use react-markdown instead of markdown-it
here is an example:
import ReactMarkdown from "react-markdown";
<div className="prose">
<ReactMarkdown>{markdown}</ReactMarkdown>
</div>
it will render the provided content as DOM in the page, and Tailwind/typography perfectly styles those elements.
I came across a weird bug in nextjs, when I am adding
<Head>
<link rel="canonical" href="url"></link>
</Head>
inside my index.tsx, one element inside that page does not render properly.
I do use
<FontAwesomeIcon icon={song.voted === true ? faHeart : fasHeart} className={`text-2xl color-text-red`} />
which has those standard classes added to it svg-inline--fa fa-youtube fa-w-18 text-2xl color-text-red.
The weird thing is that when the canonical tag is not added those classes do work correctly
After adding the tag, the width and svg-inline--fa does not get rendered (tried to refresh, restart server, prod en dev environment)
these are my dependency's
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-brands-svg-icons": "^5.15.2",
"#fortawesome/free-regular-svg-icons": "^5.15.2",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#zeit/next-css": "^1.0.1",
"#zeit/next-sass": "^1.0.1",
"autoprefixer": "^10.2.3",
"file-loader": "^6.2.0",
"mysql": "^2.18.1",
"next": "latest",
"next-fonts": "^1.5.1",
"next-images": "^1.7.0",
"next-svgr": "0.0.2",
"next-transpile-modules": "^6.0.0",
"node-sass": "^5.0.0",
"postcss": "^8.2.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-rainbow-components": "^1.24.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"tailwindcss": "^2.0.2"
has anyone ever seen this problem or has any ideas on how to fix it ?
thx in advance
probably too late for OP, but for future people it looks like this should answer the question.
add to _app.js
import "#fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;
source:
https://github.com/FortAwesome/react-fontawesome/issues/410#issuecomment-787468285
Screenshot of error log
I tried to installed it without mentioning the version 5.0.7 and it installed properly.
Here are my dependencies:
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-popper": "^1.3.7",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"redux": "^3.7.2"
I'm working on react-form-hook with yup validation. All dependencies are installed well and updated in package.json file but validations are not working.
All those yup validations are well in codesandbox.io with the same code. And I've added a nav bar with react-bootstrap and that too is not working.
Below are the dependencies installed:
"dependencies": {
"#hookform/error-message": "0.0.4",
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-hook-form": "^6.10.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"rsuite": "^4.8.4",
"web-vitals": "^0.2.4",
"yup": "^0.29.3"
},
Below is the import section
import React from "react";
import { useForm } from "react-hook-form";
import * as Yup from "yup";
I get no errors at all.