Develop Reference

React Router v6 not working with URL Slugs

I'm trying to make react-router-dom work with a simple url: /user/{name} but for some reason cannot get it to load the page with the url slug for the name.
This is the return of my App function component:
<>
<MainNavBar navigation={navigation} />
<Routes>
<Route index={true} element={<Home />} exact />
<Route path="user" element={<User />} exact>
<Route
path=":name"
render={
({ match: { params: { name } } }) => {
console.log(name);
console.log("test2");
return (<UserPage
userName={name}
/>);
}}
/>
</Route>
<Route path="*" element={<PageNotFound />} />
</Routes>
</>
This is the User component; a placeholder for my debugging atm.
const User = () => (
<div>
<header className="App-header">
<Outlet />
</header>
</div>
);
When I go to http://localhost:3000/user/test it loads the User component but not the children (the Outlet/UserPage elements)
I've tried lots of combinations but seem to be doing something wrong, so any help would be very appreciated. Thanks!

In react-router-dom v6 the Route components no longer have render or component props, they render their components on the element prop. Use the useParams hook to access the route match params. If UserPage is a component that can't use React hooks, then use a wrapper function component to access the route match param and pass it as a prop.
const UserPageWrapper = () => {
const { name } = useParams();
useEffect(() => {
console.log({ name }); // <-- log param in effect
}, [name]);
return <UserPage userName={name} />;
};
...
<>
<MainNavBar navigation={navigation} />
<Routes>
<Route index element={<Home />} />
<Route path="user" element={<User />}>
<Route path=":name" element={<UserPageWrapper />} />
</Route>
<Route path="*" element={<PageNotFound />} />
</Routes>
</>

Trigger a rerender of parent component when a child component is rendered

I am using the following material-ui theme Paperbase and within the Header.js component, I have the following useEffect hook:
const [temperature, setTemperature] = useState([]);
const getTemperature= async () => {
try {
const response = await fetch('/get-temperature')
const tempData = await response.json();
setTemperature(tempData);
} catch (err) {
console.error(err.message);
}
};
useEffect(() => {
getTemperature();
}, []);
The main purpose of this, is to display the current temperature as info, within the header component, which gets displayed at first page load/render.
Now within my App.js below, I have the following return setup where the above Header component is called.
return (
<Router>
<UserProvider myinfo={myinfo}>
<Switch>
<Route path="/">
<ThemeProvider theme={theme}>
<div className={classes.root}>
<CssBaseline />
<nav className={classes.drawer}>
<Hidden xsDown implementation="css">
<Navigator />
</Hidden>
</nav>
<div className={classes.app}>
<Header
onDrawerToggle={handleDrawerToggle}
/>
<main className={classes.main}>
<Switch>
<Route exact path="/new-user"
render={(props) => <Content key={props.location.key} />}
/>
<Route exact path="/view-results"
render={(props) => <ViewResults key={props.location.key} />}
/>
</Switch>
</main>
</div>
</div>
</ThemeProvider>
</Route>
</Switch>
</UserProvider>
</Router>
);
My question is, how can I trigger a rerender of Header (parent) whenever the user routes to either /new-user or /view-results which in turn calls either Content.js or ViewResults.js, inorder to make the useEffect in Header.js refresh the data, from the REST api fetch and display the latest temperature in the header again?
Ideally anytime Content.js or ViewResults.js is rendered, ensure that Header.js getTemperature() is called.
Any help would be much appreciated.

Your current code is pretty close to a multi layout system. As being a component child of Route, you can access the current location via useLocation() or even the native window.location.pathname.
This is my example of multi layout React app. You can try to use it to adapt to your code.
The MainLayout use a fallback route when no path is specified. It also contains a Header and include a page
const Dispatcher = () => {
const history = useHistory();
history.push('/home');
return null;
};
const App = () => (
<BrowserRouter>
<Switch>
<Route
component={Dispatcher}
exact
path="/"
/>
<Route
exact
path="/login/:path?"
>
<LoginLayout>
<Switch>
<Route
component={LoginPage}
path="/login"
/>
</Switch>
</LoginLayout>
</Route>
<Route>
<MainLayout>
<Switch>
<Route
component={HomePage}
path="/home"
/>
</Switch>
</MainLayout>
</Route>
</Switch>
</BrowserRouter>
);
And here is the code for MainLayout
const MainLayout = ({ children }) => (
<Container
disableGutters
maxWidth={false}
>
<Header location={props.location} />
<Container
component="main"
maxWidth={false}
sx={styles.main}
>
{children}
</Container>
<Footer />
</Container>
);
Now that Header can be anything. You need to put a capture in this component
import { useLocation } from 'react-router-dom'
cont Header = (props) => {
const { pathname } = useLocation();
//alternatively you can access props.location
useEffect(() => {
if (pathname === '/new-user') {
getTemperature();
}
}, [pathname]);
};
Note that Header is not a direct descendant of Route therefore it cannot access the location directly via props. You need to transfer in chain
Route -> MainLayout -> Header
Or better use useLocation

Invalid Hook Call useSelector() with react-router

I have my state in Redux working for a shopping cart. Let's say I have two pages and want to pass the state from the shopping page to the cart/checkout page.
I am calling useSelector from this page but I get an error about an invalid Hook Call.
const CartPage = () => {
const selectedProducts = useSelector(
(state) => (state && state.products) || []
);
return (
<PageContainer>
This is the Cart Page
</PageContainer>);
};
export default CartPage;
And this component is rendered by react-dom-router like this
<AppContainer>
<Navigation />
<Switch>
<Route exact path="/" render={WelcomePage} />
<Route path="/cart" render={CartPage} />
<Route path="/shopping" render={ShoppingPage} />
</Switch>
</AppContainer>
I am storing the state from a component inside the page component ShoppingPage.
The useSelector hook is working only inside components outside the react-router-dom. Is there a way to get the state in one of these components?

EDIT: Somehow it worked using a callback inside the render attribute of Route
Here the fixed code
<AppContainer>
<Navigation />
<Switch>
<Route exact path="/" render={() => <WelcomePage /> } />
<Route path="/cart" render={() => <CartPage /> } />
<Route path="/shopping" render={() => <ShoppingPage /> } />
</Switch>
</AppContainer>

SetState with React hooks after axios post

I'm trying to figure out how to set my user state with react hooks after an axois post request. Struggling to find a good solution. I've read the react hooks documentation and almost all examples that I find are just when the page loads. I want to setState on form submission as the user logs in.
Login.js
const handleLogin = (evt) => {
//Prevent default form submission
evt.preventDefault();
const loginDetails = {
username: username,
password: password,
}
//send login request to api
axios.post('http://localhost:5000/users/login', loginDetails)
.then((res) => {
setUser(loginDetails.username);
history.push('/');
})
.catch((err) => {
console.log('incorrect password/user');
history.push('/login');
})
}
Due to the Asynchronous behaviour the state is not being set before the redirect. I have also tried to place the redirect in a useEffect, but it constantly reloads the page, even when I past in a dependency. How to I ensure that my state is being set, passed into my navbar component as a prop before the history.push('/') takes effect.
Edit
App.js
return (
<Router history={history} >
<div className={styles.app}>
<Navbar user={user}/>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route exact path="/blog" component={Blog}/>
<Route exact path="/blog/create" component={CreateBlog}/>
<Route exact path="/blog/:id" component={ViewBlog}/>
<Route path="/demo" component={Demo}/>
<Route path='/resume' component={Resume}/>
<Route
exact path="/login"
render={(props) => (
<Login loginHandler={handleLogin}
usernameHandler={onChangeUsername}
passwordHandler={onChangePassword}/>)}
/>
<Route exact path="/register" render={(props) => (
<Register usernameHandler={onChangeUsername}
passwordHandler={onChangePassword}
handleRegister={handleRegister}/>
)}/>
</Switch>
<Footer/>
</div>
</Router>
);
}
export default App;

ReactJS router v4 Mobx - Router wont re-render components?

I use mobx Provider to provide stores, by wrapping the Router
<Provider {...stores}>
<BrowserRouter >
<App />
</BrowserRouter>
</Provider>
In App I have two components, Header and Main.
Header contains Link to the routes and Main contains the routes Switch:
<div className="main">
<Route exact path='/' component={Home} />
<Route exact path='/login' component={Login} />
{/* <UnvalidatedUserRoute exact path='/login' store={this.props.User} component={Login} /> */}
<ValidatedUserRoute exact path='/todos' store={this.props.User} component={UserTodos} />
</div>
ValidatedUserRoute is just a function that makes sure the user is authenticated, if not, redirect to home.
const ValidatedUserRoute = ({component: Component}, store, ...rest) => (
<Route
{...rest}
render={props =>
store.validated ? (
<Component {...props} />) : (
<Redirect to={{
pathname: "/"
}}
/>
)
} />
);
export default ValidatedUserRoute
The problem
When I click on the links, my URL does change, but the components does not render, like the page is stuck on what component was loaded at first when loading the web-page.
<Link to="/">Home</Link>
<Link to='/login'>Log In</Link>

if you are using the new react-router-dom. then you have to use a withRouter Hoc given by the library and wrap your component with it.
import {withRouter} from 'react-router-dom'
const ValidatedUserRoute = ({component: Component}, store, ...rest) => (
<Route
{...rest}
render={props =>
store.validated ? (
<Component {...props} />) : (
<Redirect to={{
pathname: "/"
}}
/>
)
} />
);
export default withRouter(ValidatedUserRoute)
what ever component is responsible for performing routing. wrap that in withRouter