We Keep Coding

Params not working with react and netlify

Onclick redirect with PARAMS in react is not working in Netlify
Hi everyone, I'm struck in a problem which works fine with localhost but creates issue with netlify.
I want to pass data onclick to a react js page via params, this works file on local host but give 404 when I tried to host this app on netlify.
Please Visit my site
As you can see on second page when I click on play video, it gives me 404.
For your clarity I'll provide my code to you.
App.js
function App() {
const style1 = {
display: "flex",
minHeight: "100vh",
flexDirection: "column",
};
return (
<div className="App">
<div style={style1}>
<HeaderComp />
<Routes>
<Route exact path="/" element={<FirstPage />} />
<Route exact path="/SecondPage" element={<SecondPage />} />
<Route
path="/ThirdPage/:url/:one/:two/:three/:four"
element={<ThirdPage />}
/>
<Route exact path="/About" element={<About />} />
<Route path="*" element={<FirstPage />} />
</Routes>
</div>
<FooterComp />
</div>
);
}
export default App;
Params giving Component
import React from "react";
// import { Link } from "react-router-dom";
export default function VideoCard({ data }) {
const style1 = {
width: "18rem",
};
return (
<div className="m-3 ">
<div className="card" style={style1}>
<img src={data.imageUrl} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">{data.videoTitle}</h5>
<p className="card-text">{data.videoDescription}</p>
<a
href={"/ThirdPage/" + data.videoUrl.substr(26)}
className="btn btn-primary"
>
Play Video
</a>
</div>
</div>
</div>
);
}
Params Recieving Component
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
export default function ThirdPage() {
const params = useParams();
const [url, updateUrl] = useState("");
useEffect(() => {
const url1 =
"http://res.cloudinary.com" +
`/${params.url}/${params.one}/${params.two}/${params.three}/${params.four}`;
updateUrl(url1);
}, [url, params]);
return (
<div className="container mb-5">
{url && (
<div className="row">
<h1>This is Third page</h1>
<video width="750" height="500" controls loop autoPlay>
<source src={url} type="video/mp4" />
</video>
</div>
)}
</div>
);
}

React-router-dom v6, URL changing but component doesn't render

I've tried everything but fail to render component when URL changes. No error messages nothing, it renders Home component but when i click on (view and edit icon)Link it just changes url, component does not render nothing happens. I couldn't find a solution, is there any way to make it work?
App.js
import "./App.css";
// import { TextFilledComp } from './Components/TextFilledComp';
import { Routes, Route } from "react-router-dom";
import { SingleTodoPage } from "./Components/SingleTodoPage";
import { EditTodo } from "./Components/EditTodo";
import { Home } from "./Components/Home";
function App() {
return (
<div>
<Routes>
<div>
<div className="header-text">Todo List</div>
<div className="box">
<Route exact path="/" element={<Home />} />
<Route path="/todo/:todoId" element={<SingleTodoPage />} />
<Route path="/edit/:TodoId" element={<EditTodo />} />
</div>
</div>
</Routes>
</div>
);
}
export default App;
Todo.js
import {
Checkbox,
List,
ListItem,
ListItemSecondaryAction,
ListItemText,
makeStyles
} from "#material-ui/core";
import DeleteIcon from "#material-ui/icons/Delete";
import EditIcon from "#material-ui/icons/Edit";
import CheckBoxIcon from "#material-ui/icons/CheckBox";
import React from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
const useStyles = makeStyles({
listRoot: {
borderWidth: "1px",
borderColor: "#aaaaaa",
borderStyle: "solid",
borderRadius: "20px"
}
});
export const TodoList = () => {
const todos = useSelector((state) => state.todo);
const classes = useStyles();
return (
<div style={{ width: "95%", margin: "10px auto" }}>
<List>
{todos.map((todo) => (
<ListItem key={todo.id} className={classes.listRoot}>
<ListItemText primary={todo.name} />
<ListItemSecondaryAction>
{/* <Checkbox
edge="end"
/> */}
<CheckBoxIcon color="primary" />
<DeleteIcon color="secondary" />
<Link to={`/edit/${todo.id}`} className="button">
<EditIcon />
</Link>
<Link to={`/todo/${todo.id}`}>view</Link>
</ListItemSecondaryAction>
</ListItem>
))}
</List>
</div>
);
};
codesandbox link for complete app

A Routes component is the replacement for Switch from v5 and should only wrap around Route components. It's solely responsible for matching the provided paths and controlling the visibility of Routes and does not know what to do with regular JSX.
function App() {
return (
<div>
<div>
<div className="header-text">Todo List</div>
<div className="box">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/todo/:todoId" element={<SingleTodoPage />} />
<Route path="/edit/:todoId" element={<EditTodo />} />
</Routes>
</div>
</div>
</div>
);
}
I've also removed the exact prop as it is deprecated in v6 since all Routes are exact by default. To allow non-exact Routes, use the new path="/nonexact/*" syntax. Some more info on the new features can be found here.

How to make Footer not to appear on home page

I am very new in web development and I am creating a personal website. I have three main tabs, HOME, ABOUT ME and CONTACT ME.
I've created a Footer as a component but it is rendering in all these three pages and I would like to keep my HOME page without a Footer.
Below some of my Code.
App.js
import React from 'react';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import './App.css';
import ...
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'Lenin Cruz',
headerLinks: [
{ title: 'Home', path: '/home' },
{ title: 'About', path: '/about' },
{ title: 'Contact', path: '/contact' }
],
home: {
title: 'HELLO I\'M Zoro!',
subTitle: 'I\'m a Engineering Student\n',
text: 'Checkout my projects below',
logo: logoo
},
about: {
title: 'About Me',
},
contact: {
title: 'Get in touch'
},
}
}
render() {
return(
<Router>
<Container>
<Navbar >
<Navbar.Brand>
<img
src= {this.state.home.logo}
/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbar-toggle"/>
<Navbar.Collapse id="navbar-toggle">
<Nav>
<Link className="nav-link" to ="/home"><Badge variant="secondary">Home</Badge></Link>
<Link className="nav-link" to ="/about"><Badge variant="secondary">About</Badge></Link>
<Link className="nav-link" to ="/contact"><Badge variant="secondary">Contact</Badge></Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Route path="/home" exact render ={() => <HomePage title= {this.state.home.title}
subTitle={this.state.home.subTitle}
text={this.state.home.text} />} />
<Route path="/about" exact render ={() => <AboutPage title= {this.state.about.title}
photo= {this.state.about.photo} />} />
<Route path="/contact" exact render ={() => <ContactPage title= {this.state.contact.title} />} />
{/* {this.props.location.pathname !== '/home' && <Footer/>} */}
<Footer className="g-Footer"/>
</Container>
</Router>
);
}
}
As you guys see, I was trying some conditional rendering for my footer in the render function but it seems not to work as it it not recognizing 'location.pathname'
{/* {this.props.location.pathname !== '/home' && <Footer/>} */}
Here is my HomePage.js with a component HERO which is just styling the content
import React from 'react';
import Hero from '../components/Hero';
function HomePage(props) {
return(
<div>
<Hero title={props.title} subTitle= {props.subTitle} text= {props.text}/>
</div>
);
}
export default HomePage;
and here ir my Footer.js component
import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function Footer() {
return(
<footer >
<Container >
<Col >
<Row>
Let's talk
</Row>
</Col>
</Container>
</footer>
);
}
export default Footer;
Any suggestions about why this.props.location.pathname doesn't work or any help with other method is much appreciated
Thanks :)

In your App class replace:
<Footer className="g-Footer" />
with
<Route
path={new RegExp('^(?!.*(\/home)).*$')}
exact
render={() => <Footer className="g-Footer" />}
/>
I have not tested if this works though

Use window.location.href instead.

Passing data from parent to child component (MaterialUI make styles)?

I'm quite new to reactjs and I'm working on a simple page that uses authentication using state. Also, for styling I'm using MaterialUI framework.
I'm trying to send the loggedInStatus prop.
I think I'm sending the props correctly, but I think that I'm messing my code with receiving the props... :S
My App.js is as follows:
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Home from './components/home/Home';
import SignIn from './components/auth/SignIn';
import Contacto from './components/contacto/Contacto'
import FamCatalog from './components/famCatalog/FamCatalog'
import ProtectedRoute from './components/protected/ProtectedRoute'
import PageError from './components/404/PageError';
class App extends Component {
constructor() {
super();
this.state = {
loggedInStatus: 'NOT_LOGGED_IN',
user: {}
}
}
render() {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Switch>
<Route
exact
path='/'
render={props => (
<Home {...props} loggedInStatus={this.state.loggedInStatus} />
)}
/>
<Route path='/signin' component={SignIn} />
<ProtectedRoute path='/famcatalog' component={FamCatalog} />
<Route path='/contacto' component={Contacto} />
<Route path='*' component={PageError} />
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
Then, the child component is as follows:
import React, { Component } from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
},
texto: {
padding: 10,
},
imagenes: {
padding: 50,
display: 'flex',
justifyContent: 'space-evenly'
}
});
function Nested() {
const classes = useStyles();
return (
<div className={classes.root} >
<h1>Status: {this.props.loggedInStatus}</h1>
<div className={classes.imagenes}>
<img src={webDevelop} alt='' />
<img src={cloudComputing} alt='' />
<img src={dashboard} alt='' />
<img src={data} alt='' />
<img src={dataSearch} alt='' />
</div>
<Typography variant="h3" gutterBottom align='center'>
...Blah, Blah, Blah...
</Typography>
<Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
...Blah, Blah, Blah...
</Typography>
</div >
)
}
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return <Nested />
}
}
export default Home;
I can't get the props. I still have the error: "TypeError: Cannot read property 'props' of undefined" and also have a warning saying Useless constructor for the constructor created inside Home class.
I'm trying to implement the workflow explained in: https://www.youtube.com/watch?v=zSt5G3s3OJI inside my code. As I didn't have a class component, I needed to re-arranged my Home component to satisfy the class component following the guidelines in (maybe here is the error...):
https://material-ui.com/styles/advanced/
Any tip of advice in what I'm doing wrong will be very well received!
Thanks in advance!
EDIT
In order to responder #HermitCrab, my new Home.js component:
import React, { Component } from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
},
texto: {
padding: 10,
},
imagenes: {
padding: 50,
display: 'flex',
justifyContent: 'space-evenly'
}
});
class Home extends Component {
constructor(props) {
super(props);
}
function Nested() {
const classes = useStyles();
return (
<div className={classes.root} >
{/* <h1>Status: {this.props.loggedInStatus}</h1> */}
<div className={classes.imagenes}>
<img src={webDevelop} alt='' />
<img src={cloudComputing} alt='' />
<img src={dashboard} alt='' />
<img src={data} alt='' />
<img src={dataSearch} alt='' />
</div>
<Typography variant="h3" gutterBottom align='center'>
... some text ...
</Typography>
<Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
... some text ...
</Typography>
</div >
)
}
render() {
return <Nested />
}
}
export default Home;
And I'm getting this error: error
thanks in advance!
EDIT #2
I'm trying a couple of things. Here is a way I introduced the function content into the Home Component:
import React, { Component } from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import cloudComputing from '../../img/cloud-computing.png';
import dashboard from '../../img/dashboard.png';
import data from '../../img/data.png';
import dataSearch from '../../img/dataSearch.png';
import webDevelop from '../../img/web-development.png';
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
},
texto: {
padding: 10,
},
imagenes: {
padding: 50,
display: 'flex',
justifyContent: 'space-evenly'
}
});
class Home extends Component {
constructor(props) {
super(props);
}
render() {
const classes = useStyles();
return (
<div className={classes.root} >
{/* <h1>Status: {this.props.loggedInStatus}</h1> */}
<div className={classes.imagenes}>
<img src={webDevelop} alt='' />
<img src={cloudComputing} alt='' />
<img src={dashboard} alt='' />
<img src={data} alt='' />
<img src={dataSearch} alt='' />
</div>
<Typography variant="h3" gutterBottom align='center'>
... TEXT
</Typography>
<Typography variant="subtitle1" gutterBottom className={classes.texto} align='justify'>
... TEXT
</Typography>
</div >
)
}
}
export default Home;
In the local:3000 I'm getting the following error:
error in browser
I'm quite lost here. How do I include the nested function inside the Home class to get the props?
Any tip of advice will be very well received.
Thanks in advance!

Your function Nested is outside of your Home component, therefore this is undefined and you can't access this.props. You have to move your Nested function inside your Home component if you want to be able to access the props passed to Home

Redirecting to another component on item click - not working

I am using react-sidenav package to navigate around different components based on what's clicked. However, this is not working when I try implementing this functionality. Here is my SideNav component:
import React from 'react';
import SideNav, { Nav, NavIcon, NavText } from 'react-sidenav';
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
//specify the base color/background of the parent container if needed
const MySideNav = () => {
return (
<div style={{background: '#2c3e50', color: '#FFF', width: 200}}>
<SideNav highlightColor='#E91E63' highlightBgColor='#00bcd4' defaultSelected='pos' onItemSelection={ (id, parent) => {
<Router>
<Redirect push to={`/${id}`} />
</Router>
}}>
<Nav id='home'>
<NavText>Home</NavText>
</Nav>
<Nav id='about'>
<NavText>About</NavText>
</Nav>
</SideNav>
</div>
)
}
export default MySideNav;
I also have this in Routes.js file, which I render in App.js:
<main>
<Switch>
<Route exact path="/home" component={Home} />
<Route path="/about" exact component={About} />
</Switch>
</main>
Then I have separate About.js and Home.js components, which I have already imported in Routes.js. When I click individual items in the sidebar, I am not able to redirect to any other components.
I can't figure out where I am going wrong since I am a beginner in React. Could someone please assist me with this? That would be much appreciated!
UPDATE
When using withRR4, the redirection is being done in the url bar, but the target components are not being rendered. Here's is my code for this:
import React from 'react';
import { Nav, withRR4 , NavIcon, NavText } from 'react-sidenav';
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
const SideNav = withRR4();
//specify the base color/background of the parent container if needed
const MySideNav = () => {
return (
<div style={{background: '#2c3e50', color: '#FFF', width: 200}}>
<Router>
<SideNav highlightColor='#E91E63' highlightBgColor='#00bcd4'>
<Nav id='home'>
<NavText>Home</NavText>
</Nav>
<Nav id='about'>
<NavText>About</NavText>
</Nav>
</SideNav>
</div>
)
}
export default MySideNav;

You need to use withRR4 as explained in the Docs here:
https://www.npmjs.com/package/react-sidenav#react-router-4-integration
EDIT
You need to import the <Route/> 's you want to use inside the <Router />
import React from 'react';
import { withRR4, Nav, NavText } from 'react-sidenav';
import { BrowserRouter as Router, Route } from 'react-router-dom';
const SideNav = withRR4();
class MySideNav extends React.Component {
renderHome = () => {
return <div>Home</div>;
};
renderAbout = () => {
return <div>About</div>;
};
render() {
return (
<Router>
<div style={{ background: '#2c3e50', color: '#FFF', width: 200 }}>
<SideNav default='home' highlightColor='#E91E63' highlightBgColor='#00bcd4'>
<Nav id='home'>
<NavText> Home </NavText>
</Nav>
<Nav id='about'>
<NavText> About </NavText>
</Nav>
</SideNav>
</div>
<div style={{ padding: 20 }}>
<Route exact path="/" render={this.renderHome}/>
<Route path="/home" render={this.renderHome}/>
<Route path="/about" render={this.renderAbout}/>
</div>
</Router>
);
}
}
I am not 100% if you must put these Routes here, can you test it out for me?