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.
- import Routes
import { BrowserRouter , Redirect, Route , Routes, Switch } from 'react-router-dom';
- 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
Remove Whitespace Inside Json Object Key Value Pair
Break the Loop of an Array Looping Function (Map, Foreach, etc.)
React Jsx - Make Substring in Bold
Detect If a Field Is Updated With JavaScript or Jquery
Angular 2 Concatenate Variable in Interpolation
What Does This Format Means T00:00:00.000Z
Check Whether an Input String Contains a Number in JavaScript
Remove Insignificant Trailing Zeros from a Number
How to Change Value of Object Which Is Inside an Array Using JavaScript or Jquery
Retaining the Textbox Values Even After Refresh
Why Does Google Chrome Always Add Space After Selected Text
How to Print Star Pattern in JavaScript in a Very Simple Manner
Javascript Scrollto Method Does Nothing
How to Hide Div When You Scroll to Bottom and Show It Again When Scroll Up to Top
Javascript: Open Several Urls With One Button Click
How to Uncheck All Below Checkboxes When One Checkbox Is Unchecked