We Keep Coding

React-JS Single post visit is not working | No routes matched location "/posts/1"

I wanted to make a single blog page of a blog website to read but it's not working
I want someone help me to solve this error.
App.js
import Demo from "./components/Pages/Demo/Demo";
import DemoPost from "./components/Pages/Demo/Post";
function App() {
return (
<div>
<Routes>
<Route path='/posts' exact element={<Demo />} />
<Route path='/demo/:pid' element={<DemoPost />} />
</Routes>
</div>
);
}
export default App;
Posts.js
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
function Demo() {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(json => setPosts(json))
}, []);
return (
<div className="posts">
<div className="grid">
{posts.map(post => (
<div key={post.id}>
<Link to={`/posts/${post.id}`}>
<h2>{post.title}</h2>
<p>{post.body}</p>
</Link>
</div>
))}
</div>
</div>
)
}
export default Demo
Post.js
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
function Post({ match }) {
const [post, setPost] = useState([]);
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/posts${match.params.pid}`)
.then(response => response.json())
.then(json => setPost(json))
console.log(match, 'why not show match');
}, []);
return (
<div className="posts">
<div className="post-container">
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
</div>
)
}
export default Post

For the link <Link to={`/posts/${post.id}`}> you need to render a route path that matches, e.g. path="/posts/:pid".
<Routes>
<Route path='/posts' exact element={<Demo />} />
<Route path='/posts/:pid' element={<DemoPost />} />
</Routes>
react-router-dom#6 Route components also no longer pass route props to the routed component. The element component should use the useParams hook to access the route path params.
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
function Post() {
const { pid } = useParams();
const [post, setPost] = useState();
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/posts/${pid}`)
.then(response => response.json())
.then(json => setPost(json));
}, [pid]); // <-- pid is effect dependency
if (!post) {
return null; // <-- or loading indicator/spinner/etc
}
return (
<div className="posts">
<div className="post-container">
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
</div>
);
}

Cannot update a component while rendering a different component)

Im using React 18, React Router 6 and React Auth Kit 2.7
I tried to do login page, as showed in example for RAK link
But i getting this error
Code for Login Component JSX
import React from "react"
import axios from "axios"
import { useIsAuthenticated, useSignIn } from "react-auth-kit"
import { useNavigate, Navigate } from "react-router-dom"
const SignInComponent = () => {
const isAuthenticated = useIsAuthenticated()
const signIn = useSignIn()
const navigate = useNavigate()
const [formData, setFormData] = React.useState({ login: "", password: "" })
async function onSubmit(e) {
e.preventDefault()
axios.post("http://localhost:3030/api/auth/login", formData).then((res) => {
if (res.status === 200) {
if (
signIn({
token: res.data.token,
expiresIn: res.data.expiresIn,
tokenType: "Bearer",
authState: res.data.authUserState,
})
) {
navigate("/profile")
console.log("logged in")
} else {
//Throw error
}
} else {
console.log("da duck you want")
}
})
}
console.log(isAuthenticated())
if (isAuthenticated()) {
// If authenticated user, then redirect to his profile
return <Navigate to={"/profile"} replace />
} else {
return (
<form onSubmit={onSubmit} className="flex flex-col w-96 p-2">
<input
className="text-black mt-2"
type={"login"}
onChange={(e) => setFormData({ ...formData, login: e.target.value })}
/>
<input
className="text-black mt-2"
type={"password"}
onChange={(e) =>
setFormData({ ...formData, password: e.target.value })
}
/>
<button type="submit">Submit</button>
</form>
)
}
}
export default SignInComponent
Routes.jsx
// system
import React from 'react'
import { RequireAuth } from 'react-auth-kit'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
// pages
import DeveloperPage from "../pages/Dev.page";
import MainPage from "../pages/Main.page";
import ProfilePage from "../pages/profile/Profile.page";
import LoginPage from "../pages/Auth/Login.page.auth"
import RegisterPage from "../pages/Auth/Register.page.auth"
// components
// logic
const RoutesComponent = () => {
return (
<BrowserRouter>
<Routes>
{/* main */}
<Route path={"/"} element={<MainPage />} />
{/* Authentication */}
<Route path={"/login"} element={<LoginPage />} />
<Route path={"/register"} element={<RegisterPage />} />
{/* Developer */}
<Route path={"/dev"} element={<DeveloperPage />} />
{/* Other */}
<Route path={"/profile"} element={
<RequireAuth loginPath={"/login"}>
<ProfilePage />
</RequireAuth>
} />
</Routes>
</BrowserRouter>
);
};
export default RoutesComponent;
Profile.jsx
import React, { useState } from 'react'
export default function App() {
return (
<div className="wrapper">
<h1>Profile</h1>
</div>
);
}
Im already tried searching this error all over stackoverflow, github issues and link that provided by error but still dont understand how to fix error in my example
Updated:
App.jsx
import React from "react";
import { AuthProvider } from "react-auth-kit";
import RoutesComponent from "./routes/router";
import "./index.css";
function App() {
return (
<AuthProvider authName={"_auth"} authType={"localstorage"}>
<RoutesComponent />
</AuthProvider>
);
}
export default App;

Have you put your application inside AuthProvider? https://github.com/react-auth-kit/react-auth-kit/blob/master/examples/create-react-app/src/App.js

How to pass the data using the id params

I been stuck in this for a few days now, i cant find the way to pass the data dinamically from my SlideShow component to a Detail component, I used this as a way to display and filter the category within the same component.
import React, {useState} from 'react'
import styles from '../slideshow/SlideShow.module.css'
import BackToTopButton from '../BackToTopButton'
import { portafolio } from "../../data/dummydata"
import {
generatePath,
useNavigate
} from "react-router-dom";
const allCategory = [...new Set(portafolio.map((item) => item.category))]
const SlideShow = () => {
const [list, setList] = useState(portafolio)
const [category] = useState(allCategory)
const filterItems = (category) => {
const newItems = portafolio.filter((item) => item.category === category)
setList(newItems)
}
const [id, setId] = useState();
const navigate = useNavigate();
const handleProceed = (e) => {
id && navigate(generatePath("/project/:id", { id, filterItems }));
};
return (
<>
<div name='top' className={styles.subnav}>
<div className={styles.var}>
<ul className={styles.menu}>
{category.map((category) => (
<li>
<button onClick={() => filterItems(category)}>{category}</button>
</li>
))}
</ul>
</div>
</div>
<div className={styles.slideshow}>
<div className={styles.container}>
{list.map((items, i) => (
<div>
<a href={`/project/${id}`} key={i} onClick={(e) => {
setId(items.id);
}}>
<img onClick={handleProceed} src={items.cover} alt='' />
</a>
<div className={styles.text}>
<h5>{items.shortdes}</h5>
</div>
</div>
))}
</div>
<BackToTopButton />
</div>
</>
)
}
export default SlideShow
and here is the component where i want to display it, but it only passes the id parameter but not the rest of the data
import React from 'react'
import NavBar from '../navbar/NavBar'
import Footer from '../footer/Footer'
import styles from "../projectinfo/Description.module.css"
import { useParams } from 'react-router-dom'
const Projectinfo = () => {
const { id } = useParams();
console.log(id);
return (
<div >
<NavBar />
<div className={styles.Description}>
<div>
<div className={styles.main}>
<h2>{id}</h2>
<h4>{id.description}</h4>
</div>
<div className={styles.slideshow}>
<img src={id.cover} alt='' />
</div>
<h4>{id.shortdes}</h4>
</div>
</div>
<Footer />
</div>
)
}
export default Projectinfo
and here is the index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Info from './Info';
import Menu from './Menu';
import ProjectInfo from './components/projectinfo/Projectinfo';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<Routes>
<Route path='/' exact element={<Menu />} />
<Route path="/project/:id" element={<ProjectInfo />} />
<Route path='/info' element={<Info />} />
</Routes>
</BrowserRouter>
);

BrowserRouter not loading pages [duplicate]

This question already has an answer here:
Why I receive blank page? React
(1 answer)
Closed 11 months ago.
I've used BrowserRouter here, and wrapped the within a tag.
But the problem is, the ShowTodoList page is not rendering.
Is this syntactically correct?
App.js file
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import React, { lazy } from 'react';
import "./App.scss";
const ShowTodoList = lazy(() => import("./components/showTodoList"));
const CreateTodo = lazy(() => import("./components/createTodo"));
function App() {
return (
<div className="app-contents">
TODO - LIST
<BrowserRouter>
<Routes>
<Route path="/" component={ShowTodoList} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
ShowTodoList.jsx
import { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { UpdateTodo } from "./updateTodo";
function TodoCard({ data, handleEdit, handleDelete }) {
const { _id, title, description } = data;
return (
<li key={_id}>
<div className="title-description">
<h3>{title}</h3>
<p>{description}</p>
</div>
<div className="button-container">
<button className="button" name={_id} onClick={handleEdit}>
edit
</button>
<button className="button" name={_id} onClick={handleDelete}>
delete
</button>
</div>
</li>
);
}
export function ShowTodoList() {
const [todo, setTodo] = useState([]);
const [open, setOpen] = useState(false);
const [id, setId] = useState("");
const [update, setUpdate] = useState(false);
useEffect(
function () {
axios
.get("http://localhost:8000/api/todo")
.then((res) => {
console.log(res.data);
setTodo(res.data);
})
.catch((err) => {
console.log(err.message);
});
},
[update]
);
function handleEdit(e) {
setId(e.target.name);
setOpen(true);
}
function handleUpdate() {
console.log("update:", update, !update);
setUpdate(!update);
}
function handleDelete(e) {
axios.delete(`http://localhost:8000/api/todo/${e.target.name}`);
setTodo((data) => {
return data.filter((todo) => todo._id !== e.target.name);
});
}
function handleClose() {
setId("");
setOpen(false);
}
return (
<section className="container">
<Link to="/create-todo" className="button-new">
<button className="button">New</button>
</Link>
<section className="contents">
<h1>TODO</h1>
<ul className="list-container">
{todo.map((data) => (
<TodoCard
data={data}
handleEdit={handleEdit}
handleDelete={handleDelete}
/>
))}
</ul>
</section>
{open ? (
<section className="update-container">
<div className="update-contents">
<p onClick={handleClose} className="close">
×
</p>
<UpdateTodo
_id={id}
handleClose={handleClose}
handleUpdate={handleUpdate}
/>
</div>
</section>
) : (
""
)}
</section>
);
}
I'm getting a blank page as below:enter image description here
Could anybody please check the codes and point out where I'm going wrong?

If you are using react-router version 6, we don't have component props in this version, and you should use element instead of it.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import React, { lazy, Suspense } from "react";
const ShowTodoList = lazy(() => import("./components/showTodoList"));
const CreateTodo = lazy(() => import("./components/createTodo"));
function App() {
return (
<div className="app-contents">
TODO - LIST
<Suspense fallback={<div>Loading...</div>}>
<BrowserRouter>
<Routes>
<Route path="/" element={<ShowTodoList />} />
</Routes>
</BrowserRouter>
</Suspense>
</div>
);
}
export default App;

Login Form React JS With Custom Hook

I'm currently in the process of learning React JS.Tutorial D.O
I already have a PHP backend before and I want to create a login form where the result of the backend is JWT.
I use a custom hook in React JS for that.
Here is the code that I created.
App.js
import "./App.css";
import React from "react";
import { Routes } from "../config";
import { useToken } from "../hooks";
import Login from "./Login";
const App = () => {
const { token, setToken } = useToken();
if (!token) {
return <Login setToken={setToken} />;
}
return <Routes />;
};
export default App;
useToken()
import { useState } from "react";
export default function useToken() {
const getToken = () => {
const tokenString = localStorage.getItem("token");
const userToken = JSON.parse(tokenString);
return userToken?.token;
};
const [token, setToken] = useState(getToken());
const saveToken = (userToken) => {
localStorage.setItem("token", JSON.stringify(userToken));
setToken(userToken.token);
};
return {
setToken: saveToken,
token,
};
}
Login/index.js
import React, { useState } from "react";
import PropTypes from "prop-types";
import { Button, Card, Col, Container, Form, Row } from "react-bootstrap";
import "./login.css";
async function loginUser(credentials) {
const url = "v1/auth";
const user = new FormData();
user.append("username", credentials.username);
user.append("password", credentials.password);
return fetch(url, {
method: "POST",
body: user,
}).then((data) => data.json());
}
export default function Login({ setToken }) {
const [username, setUserName] = useState();
const [password, setPassword] = useState();
// Handle submit
const handleSubmit = async (e) => {
e.preventDefault();
const token = await loginUser({ username, password });
setToken(token);
};
return (
<div id="login-page">
<Container>
<Row className="d-flex justify-content-md-center align-items-center vh-100">
<Col sm={12} md={6}>
<Card>
<Form onSubmit={handleSubmit}>
<Card.Header>Sign In</Card.Header>
<Card.Body>
<Form.Group controlId="loginform-username">
<Form.Label>Username</Form.Label>
<Form.Control
type="text"
placeholder="Username"
name="username"
onChange={(e) => setUserName(e.target.value)}
/>
</Form.Group>
<Form.Group controlId="loginform-password">
<Form.Label>Password</Form.Label>
<Form.Control
name="password"
type="password"
placeholder="Password"
onChange={(e) => setPassword(e.target.value)}
/>
</Form.Group>
</Card.Body>
<Card.Footer>
<Button
variant="primary"
type="submit"
className="float-right"
>
Login
</Button>
<div className="clearfix"></div>
</Card.Footer>
</Form>
</Card>
</Col>
</Row>
</Container>
</div>
);
}
Login.propTypes = {
setToken: PropTypes.func.isRequired,
};
When I login successfully, I save the token to local storage. But I got the following warning.
index.js:1 Warning: Failed prop type: The prop `setToken` is marked as required in `Login`, but its value is `undefined`.
How to solve this?. Any help it so appreciated
Updated
Routes
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Login, Home } from "../../pages";
const Routes = () => {
return (
<Router>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
};
export default Routes;

In Routes you call Login but never pass it setToken, which is required. One option is to pass the setToken function down through Routes:
App.js
import "./App.css";
import React from "react";
import { Routes } from "../config";
import { useToken } from "../hooks";
import Login from "./Login";
const App = () => {
const { token, setToken } = useToken();
if (!token) {
return <Login setToken={setToken} />;
}
return <Routes setToken={setToken} />;
};
export default App;
Routes.js
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Login, Home } from "../../pages";
const Routes = ({ setToken }) => {
return (
<Router>
<Switch>
<Route path="/login">
<Login setToken={setToken} />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
};
export default Routes;

<Route path="/login">
<Login /> /* <--- this line is calling Login component but is passing setToken as undefined */
</Route>