Develop Reference

Why am I getting "Objects are not valid as a React child" error?

I have a lot of files, but I think the problem is coming from my authentication component in React. I basically want to only display a page if the user is logged in otherwise I want to the user to be redirected.
react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, WrappedComponent}). If you meant to render a collection of children, use an array instead.
requireAuth.js
// function that can wrap any component to determine if it is authenticated
import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { push } from "#lagunovsky/redux-react-router"; // not sure if this correct
export default function requireAuth(Component) {
class AuthenticationComponent extends React.Component {
constructor(props) {
super(props);
this.checkAuth();
}
componentDidUpdate(prevProps, prevState) {
this.checkAuth();
}
checkAuth() {
// if not authenticated then it is redirected
if (!this.props.isAuthenticated) {
const redirectAfterLogin = this.props.location.pathname;
this.props.dispatch(push(`/login?next=${redirectAfterLogin}`));
}
}
// if authenticated then renders the component
render() {
return (
<div>
{this.props.isAuthenticated === true ? (
<Component {...this.props} />
) : null}
</div>
);
}
}
AuthenticationComponent.propTypes = {
isAuthenticated: PropTypes.bool.isRequired,
location: PropTypes.shape({
pathname: PropTypes.string.isRequired,
}).isRequired,
dispatch: PropTypes.func.isRequired,
};
// checks isAuthenticated from the auth store
const mapStateToProps = (state) => {
return {
isAuthenticated: state.auth.isAuthenticated,
token: state.auth.token,
};
};
return connect(mapStateToProps)(AuthenticationComponent);
}
App.js
class App extends Component {
render() {
return (
<div>
<Root>
<ToastContainer hideProgressBar={true} newestOnTop={true} />
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/closet" element={requireAuth(Closet)} />
<Route path="*" element={<NotFound />} />
</Routes>
</Root>
</div>
);
}
}
I have done some digging but I can't find a problem like this.

The error is because on this line:
<Route path="/closet" element={React.createComponent(requireAuth(Closet))} />
You're passing the actual class definition to the element prop and not an instance of the class (which would be the React component). To fix this, you can use React.createElement:
class App extends Component {
render() {
return (
<div>
<Root>
<ToastContainer hideProgressBar={true} newestOnTop={true} />
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/closet" element={React.createElement(requireAuth(Closet))} />
<Route path="*" element={<NotFound />} />
</Routes>
</Root>
</div>
);
}
}

Because Route's element props need a ReactNode,But requireAuth(Closet)'s type is () => React.ReactNode, you can change your App.js like this:
const AuthComponent = requireAuth(Closet);
class App extends Component {
render() {
return (
<div>
<Root>
<ToastContainer hideProgressBar={true} newestOnTop={true} />
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/closet" element={<AuthComponent />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Root>
</div>
);
}
}

Render multiple Route into a main Router in react-router-dom v5

I have multiple components with different paths (routes) and would like to export those to a single Main router component.
For example:
routeComponent1.js
export default function childRoutes() {
return (
<div>
<Route path="/foo" component={foo} />
<Route path="/bar" component={bar} />
</div>
);
}
routeComponent2.js
export default function childRoutes2() {
return (
<div>
<Route path="/foo2" component={foo2} />
<Route path="/bar2" component={bar2} />
</div>
);
}
I would like to use it in
root.js
import routeComponent1 from 'routeComponent1.js';
import routeComponent2 from 'routeComponent2.js';
class Root extends Component {
constructor(props) {
super(props);
}
render() {
return <Router>{routeComponent1}</Router>;
}
}
It is giving an error - Invariant Violation: <Route> elements are for router configuration only and should not be rendered.
Expecting the
<Router>
<div>
<Route path="/foo" component={foo} />
<Route path="/bar" component={bar} />
</div>
</Router>

routeComponent1 and routeComponent2 are React components. React components are Capitalized and rendered as JSX.
Example:
import RouteComponent1 from 'routeComponent1.js';
import RouteComponent2 from 'routeComponent2.js';
class Root extends Component {
render() {
return (
<Router>
<RouteComponent1 />
<RouteComponent2 />
</Router>
);
}
}

Assuming you're using the latest version of react router (v6), you can use nested routes as described here: https://reactrouter.com/en/main/start/overview#nested-routes
So this is what your App.jsx might look like:
import {
BrowserRouter as Router, Routes, Route
} from "react-router-dom";
import {AuthRoute, NonAuthRoute, UserParent} from "../components";
import {
Dasboard, UserList, CreateUser, SignIn, Page404
} from "./pages"
// Define your paths here ...
export const paths = {
SIGN_IN: "/sign-in",
DASHBOARD: "/dashboard",
LIST_USERS: "/users/list"
CREATE_USERS: "/users/create"
}
// All your routes which require authentication (requires login)
const authRoutes = [
{
path: paths.DASHBOARD,
element: <Dashboard />
},
]
// Authenticated routes but need a particular parent component
const userAuthRoutes = [
{
path: paths.LIST_USERS,
element: <UserList />
},
{
path: paths.CREATE_USERS,
element: <CreateUser />
}
]
// Paths that dont require authentication
const nonAuthRoutes = [
{
path: paths.SIGN_IN,
element: <SignIn />
},
]
const App = () => {
return (
<Router>
<Routes>
{/* AUTHENTICATED ROUTES */}
<Route element={<AuthRoute />}>
{authRoutes.map((route, index) =>
<Route key={index} {...route} />;
)}
{/* User Management */}
<Route element={<UserParent />}>
{userAuthRoutes.map((route, index) =>
<Route key={index} {...route} />
)}
</Route>
</Route>
{/* NON-AUTH ROUTES */}
<Route element={<NonAuthRoute />}>
{nonAuthRoutes.map((route, index) =>
<Route key={index} {...route} />;
)}
</Route>
<Route path="*" element={<Page404 />} />
</Routes>
</Router>
)
}

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

react-router v5 – nested routes

I can't figure this out even when looking on SO answers. I have a layout that looks like this:
const Dashboard = (props) => (
<div className={styles.views}>
<Route
to="/dashboard/reports/create"
render={() => <ReportsForm {...props} />}
exact
/>
<Route
to="/dashboard/reports"
render={() => <Reports {...props} />}
exact
/>
</div>
);
const routes = [
{ path: '/', component: Home, exact: true },
{ path: '/dashboard', component: Dashboard },
{ path: '/about', component: About, exact: true },
{ path: undefined, component: Error404 },
];
const Routes = () => {
return (
<Switch>
{routes.map((config, i) => {
const key = `path-${config.path}`;
return <Route key={key} {...config} />;
})}
</Switch>
);
};
const App = compose(
withRouter,
connect(mapStateToProps),
)(() => {
return (
<Router history={history}>
<IntlProvider>
<Routes />
</IntlProvider>
</Router>
);
})
I have a dashboard component responsible for rendering multiple tabs, so going to /dashboard/reports/create should only render the ReportsForm component, and going to /dashboard/reports should only render the Reports component. Currently both are rendered in both cases.
What am I doing wrong?
EDIT
When I try to print out the match prop in the Dashboard it gives me this – maybe this will be helpful:
{
"path": "/dashboard",
"url": "/dashboard",
"isExact": false,
"params": {}
}

Apart from typo that you pointed out for declaring to instead of path
You can wrap Dashboard component Routes in a Switch
const Dashboard = (props) => (
<div className={styles.views}>
<Switch>
<Route
path="/dashboard/reports/create"
render={() => <ReportsForm {...props} />}
exact
/>
<Route
path="/dashboard/reports"
render={() => <Reports {...props} />}
exact
/>
</Switch>
</div>
);
If that dont work you can even wrap the entire thing in Route with initial path as follows:
const Dashboard = props => (
<div className={styles.views}>
<Route path="/dashboard/reports"> // <------------------
<Switch>
<Route path="/dashboard/reports/create" render={() => <ReportsForm {...props} />} exact />
<Route path="/dashboard/reports" render={() => <Reports {...props} />} exact />
</Switch>
</Route>
</div>
);
Here's the working example solution that I just created: https://stackblitz.com/edit/react-uih91e-router-nested?file=index.js

React Router Declared but doesn't work please

Hello I want it to render InstrumentPage with no props when #/ is access but when #/ipb is access pass ipb as the props entity. But it's not working.
render() {
return (<React.Fragment>
<HashRouter>
<Switch>
<Route path='/' render={(props) => <InstrumentPage {...props} />}/>
{Object.keys(AppConfig).forEach((property) =>
<Route path={property} render={(props) => <InstrumentPage {...props} entity={property} />} />)
}
</Switch>
</HashRouter>
</React.Fragment>);
}
AppConfig
const AppConfig = {
pb: {
header: 'PBHeader',
body: 'PBBody',
},
ipb: {
header: 'IPBHeader',
body: 'IPBBody',
},
};
export default AppConfig;

You need to use map and return the Route, forEach won't return anything but undefined.
<Switch>
<Route exact path='/' render={(props) => <InstrumentPage {...props} />}/>
{Object.keys(AppConfig).map((property) =>
<Route
path={`/${property}`}
render={ (props) => <InstrumentPage {...props} entity={property} /> }
/>
)
}
</Switch>
Note: When you write path={property} which means path={ipb} or path={pb} which is incorrect path. Correct path should be path="/ipb" (Notice the slash), for this you need to do /${property} [contains back-tick] (using Template string).
Also add exact prop for your first Route otherwise it will going to match for all the Routes.