Redirect Changing Page Url But Not Rendering New Page

Redirect changing page URL but not rendering new page

if you are using react-router-dom wrap your component export in withRouter provided by react-router-dom .

and all component usage should be returned from render. then only react knows what to render.

import React from 'react'
import { withRouter, Redirect } from 'react-router-dom';

class App extends React.Component {

render() {
if (this.state.toLogin && !this.state.mounted) {
return (
<React.Fragment>
<Route exact path="/Login" component={Login} />
<Route exact strict path="/" render={({location}) => {
if (location.pathname === window.location.pathname) {
return <Redirect to="/Login"/>;
}
return null;
}} />
</React.Fragment>
);
}

return (
<div className="App">
<ReactCSSTransitionGroup
transitionName="remove"
transitionEnterTimeout={100}
transitionLeaveTimeout={100}>
{child}
</ReactCSSTransitionGroup>
</div>
)}

}
export default withRouter(App)

React Router v6 changes URL but doesn't render

When the ProjectOverview component is rendered and the route path changes and projectId changes the useEffect hook isn't triggered again to fetch any data.

Add projectId to the useEffect hook's dependency array so when projectId value changes the effect is run again.

const ProjectOverview = (props) => {
const { projectId } = useParams();
...

useEffect(() => {
axios
.get("http://localhost:4000/projects/" + projectId, {
withCredentials: true
})
.then((res) => {
setProject(res.data);
axios
.get("http://localhost:4000/projects/" + projectId + "/owner", {
withCredentials: true
})
.then((res) => {
setOwner(res.data);
axios
.get("http://localhost:4000/projects/" + projectId + "/repos", {
withCredentials: true
})
.then((res) => {
setRepos(res.data);
axios
.get(
"http://localhost:4000/projects/" + projectId + "/issues",
{ withCredentials: true }
)
.then((res) => {
...
});
});
});
})
.catch((err) => {
...
});
...
}, [projectId]);

Additionally, as only a suggestion, you should flatten your Promise chain. Promise chains were created to resolve an issue known as "nesting hell" involving nesting asynchronous callbacks and you've not escaped the nesting issue.

Example:

const options = { withCredentials: true };
axios
.get("http://localhost:4000/projects/" + projectId, options)
.then((res) => {
setProject(res.data);
return axios.get(
"http://localhost:4000/projects/" + projectId + "/owner",
options
);
})
.then((res) => {
setOwner(res.data);
return axios.get(
"http://localhost:4000/projects/" + projectId + "/repos",
options
);
})
.then((res) => {
setRepos(res.data);
return axios.get(
"http://localhost:4000/projects/" + projectId + "/issues",
options
);
})
.then((res) => {
/**
* distributing data for charts
*/
const repoDistrubution = [0, 0, 0, 0];
const csetDistribution = [0, 0, 0, 0];
let cSum = 0;
let rSum = 0;
for (const issue of res.data) {
...
}
setCsetIssueDistribution(csetDistribution);
setReposIssueDistribution(repoDistrubution);
setCsetSum(cSum);
setReposSum(rSum);
})
.catch((err) => {
if (err.status === 404) {
setProjectNotFound(true);
}
console.log(err);
});

React URL changes but component does not render

Try using Routes instead of switch.

  1. import Routes
import { BrowserRouter , Redirect, Route , Routes, Switch } from 'react-router-dom';


  1. Change the Switch to *Routes
        <Routes>
<Route exact path="/" >
<Home />
</Route>
<Route path="/details" >
<Details />
</Route>
<Route path="*">
<Redirect to="/" />
</Route>
</Routes>

I hope this helps



Related Topics



Leave a reply



Submit