We Keep Coding

How should I return HTML in a React.js class component without getting an error? [duplicate]

Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page
//App.js File
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
// import ReactDOM from "react-dom";
const App = () => {
return (
<Router >
<Routes>
<Route path="/" component={ Home }></Route>
</Routes>
</Router>
)
}
export default App;
**My any react router related code not working i don't know why it happend when i start insert some route in program so it show this error **

In V6, you can't use the component prop anymore. It was replaced in favor of element:
<Route path="/" element={<Home />}></Route>
More info in the migration doc.

I had the same problem. Replace component with element and it worked.
Replace this:
<Route path="/" component={HomePage} exact />
with this:
<Route path="/" element={<HomePage/>} exact />

I had the same error however my fix was slightly different
I had spelled element wrong.
<Route exact path='/MyGames' elemtent={<MyGames/>}/>
and this was the error it gave me in the browser console
Matched leaf route at location "/MyGames" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

Very simple:
use element instead of component
wrap the your component like this: {<Home/>} instead of {Home}
<Route path="/" component={ <Home/> } />

in version 6:
component replaced with element and needs to close "</Route>"
<Route exact path="/" element={<AddTutorial />}></Route>
https://reactrouter.com/docs/en/v6/getting-started/overview

This is a common problem if you are using react-router-dom V6
To solve this it's simple
In your code
Replace component with element
Replace {home} with {}
This becomes...
<Route path="/" element={}>
This will definitely solve the problem.

If you're using react-router-dom 6 or above, you may have a routes array that includes parent and child routes. You may then try to open a route such as
/portal
and get this error because that component corresponds to a child route
/:customerid/portal
but you haven't read your routes (and their child routes) closely enough to see that.

Does react-router-dom automatically pass history object to children components inside Router?

This will probably be a rookie question but does Router component passes down the history object to child components automatically? to demonstrate I have this
App.js ;
const App = () => {
return (
<>
<h1>Hello</h1>
<Router history={history}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/another_route" exact component={AnotherRoute} />
</Switch>
</Router>
</>
);
};
and Home and Another Route components taking advantage of the history prop to re-route without explicitly being passed down to the children via Router.
// Home.js
import React from "react";
const Home = (props) => {
return (
<>
<h3> Hello From home </h3>
<button onClick={() => props.history.push("/another_route")}>
click here to go another route
</button>
</>
);
};
export default Home;
// AnotherRoute.js
import React from "react";
const AnotherRoute = (props) => {
return (
<>
<h3> Hello From this another Route </h3>
<button onClick={() => props.history.push("/")}>
click here to go back
</button>
</>
);
};
export default AnotherRoute;
Everything functioning just fine, but I would like to understand this. I haven't seen it in the documentation explicitly.
here is a codesandbox I created for you to experiment:
https://codesandbox.io/s/react-router-dom-passes-history-object-to-children-automatically-jj7ih
thanks.

Yes
All Route render methods will be passed the same three route props , match
,location,history. So you can use these props in all the components you render with react-router-dom
What are Route render methods?
The recommended method of rendering something with a <Route> is to use children elements. There are, however, a few other methods you can use to render something with a <Route>like
<Route component>
<Route render>
<Route children> function
What is your Route render method in your example?
You have used <Route component> as <Route path="/" exact component={Home} />
Official Docs

Private Route getting called dozens of times in React

I keep having maximum update depth exceeded errors and I can't figure out why.
I have the following (pared down, it was more complex originally and actually rendered the component) private route in a private route file:
class PrivateRoute extends Component {
render() {
console.log("private route");
return <Redirect to="/login" />;
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(withKeycloak(PrivateRoute));
And then in my index.js I have the following:
<Route
render={({ location }) => {
const { pathname } = location;
return (
<TransitionGroup>
<CSSTransition
key={pathname}
classNames="page"
timeout={{
enter: 1000,
exit: 1000
}}
>
<Route
location={location}
render={() => (
<Switch>
<Route path="/login" component={LoginPage} />
<Route path="/signup/" component={Signup} />
<PrivateRoute
exact
path="/cards/"
component={Wrapper}
/>
<PrivateRoute
exact
path="/"
component={Wrapper}
/>
...
This should, as far as I can tell, go to the PrivateRoute component for Wrapper on initial load, and then, redirect to the login page, which should not invoke the private route.
Instead, I see:
52 private route
in my console log.
Why am I being redirected back to PrivateRoute dozens of times? Shouldn't this happen once, and that's it?
There's no redirect to anywhere else on the login page at all. There is a login function, but that requires a button click, which is not happening.
Any idea on why this could be happening?
The error message:
in Lifecycle (created by Context.Consumer)
in Redirect (at PrivateRoute.js:11)
in PrivateRoute (created by Context.Consumer)
in WithKeycloak(PrivateRoute) (created by Context.Consumer)
in Connect(WithKeycloak(PrivateRoute)) (at src/index.js:114)
in Switch (at src/index.js:106)
in Route (at src/index.js:103)
in Transition (created by CSSTransition)
in CSSTransition (at src/index.js:95)
in div (created by TransitionGroup)
Originally, the routes looked more like this:
class PrivateRoute extends Component {
render() {
return (
<Route
{...rest}
render={props =>
<Component {...props} />}
/>
)
}
}

rather than
<PrivateRoute
component={Wrapper}
/>
You want to do something like
<Route exact path="/"
render=(props => (<PrivateRoute exact
path="/"
component={Wrapper}>)) />
Otherwise it will just always render your PrivateRoute

Route component is expected to receive a prop exact in order to only render this component when a match exists.
If not exact prop passed, will render it. And then if another match, with render both, and this is why you are getting redirected everytime.
Since you are using a custom component, you must handle this prop to provide it into the Route component.
to fix it, you can follow #TKol approach for example.
<Route exact path="/"
render=(props => (<PrivateRoute
path="/"
component={Wrapper}>))
/>
This way Route is handling that for you and only will render 1 at time.

OwnProps Match and Params are undefined React-Router V3

Trying to grab id from my url so that I can use it to fetchData on componentDidMount. I'm also using it to set some state in the component to display information on the page. However, both ownProps.match and ownProps.params keeps coming through as undefined. I've tried a lot of things and all I can think of is that my / route is matching before thing/:id and it's causing an issue?
(I can use either and they fail like so).
TypeError: this.props.params is undefined
TypeError: this.props.match is undefined
Here are my routes:
export default (
<Route path="/" component={App}>
<Route path="login" component={requireNoAuthentication(LoginView)} />
<Route path="register" component={requireNoAuthentication(RegisterView)} />
<Route path="home" component={HomeContainer} />
<Route path="thing/:id" component={ThingContainer} />
<Route path="category" component={CategoryContainer} />
<Route path="analytics" component={requireAuthentication(Analytics)} />
<Route path="basic" component={requireNoAuthentication(BasicContainer)} />
<Route path="*" component={DetermineAuth(NotFound)} />
</Route>
);
mapStateToProps here (I've usually been commenting out thing until I can figure out the issue so can ignore that one). Where I'm really seeing the issue is the const {id} portion.
function mapStateToProps(state, ownProps) {
console.log(ownProps);
return {
data: state.data,
token: state.auth.token,
loaded: state.data.loaded,
isFetching: state.data.isFetching,
isAuthenticated: state.auth.isAuthenticated,
thing: state.things[ownProps.match.params.id],
};
}
Here's where a piece of my component that's giving me the headache.
#connect(mapStateToProps, mapDispatchToProps)
export class Thing extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
const { id } = this.props.match.params;
this.fetchData();
this.props.fetchThing(id);
}
Btw, ownProps is coming through just fine when I console.log it above. However it's missing any params/match which made me thing it was the route matching before it's intended match? That would be ridiculous though because I couldn't ever do a nested route without losing my react-router params?
I'm to the point now where I've started at it so long that I'm losing focus. Turning to some wonderful person for help!
Application is react 15.3, react-router v3, redux.

I see that you r rendering "ThingContainer" but ur class is an "Thing". Where r u using a HOC? Did you remember to pass all the props to the child ?
Example:
const ThingContainer = (props) => <Thing ...props />

The props object returned from mapStateToProps() should include ownProps.match if you want to use it in your component. Either add it as another property, or merge ownProps into the object being returned.

<Switch> component matching null value in react-router-4

I'm trying to migrate to use React Router 4 and having some trouble understanding the logic of the <Switch> component as it's used in the docs to handle a 404 (or unmatched) route.
For my entry JavaScript file, I have the following routes set up.
index.js
<Switch>
<Route path="/login" component={Login} />
<Route path="/forgot-password" component={ForgotPassword} />
<Route path="/email-verification" component={EmailVerification} />
<Route component={App} />
</Switch>
The Login component will check to see if the user is authenticated, and if so, redirect the user to the /dashboard route (via history.replace).
The App component is only accessible when the user is authenticated and it has a similar check to redirect the user to /login if she is not.
In my App component I have more specified routes that I can be sure are only accessible if the user is logged in.
App.js
<Switch>
<Route path="/dashboard" component={Dashboard} />
<Route path="/accounts" component={Account} />
<Authorize permissions={['view-admin']}>
<Route path="/admin" component={Admin} />
</Authorize>
<Route path="/users" component={Users} />
<Route component={NotFound} />
</Switch>
Herein lies my problem. The Authorize component checks against the permissions passed to see if the user has those permissions, if so, it renders the children directly, if not, it returns null from render().
The expected behavior here is that the <Route path="/admin" /> does not render at all when there are insufficient permissions and the <Route component={NotFound} /> component renders.
According to the docs:
A renders the first child that matches. A
with no path always matches.
However, if I go to any route declared after the <Authorize> component, the router is matching to null. This means that, based on the example above, going to /users returns null. Is the expected behavior of react-router to return the first match in a <Switch/> component, even if it's a null value?
How can I provide a "catch-all" route (404) for such a situation without creating a <PrivateRoute> component for each of the many, authenticated routes in App.js? Should a null value really produce a match?

Unfortunately, react-router's Switch component won't work with routes nested inside other components like in your example. If you check the docs for Switch, it says:
All children of a <Switch> should be <Route> or <Redirect> elements.
... so your Authorize component is not actually legal there as a direct child of Switch.
If you have a read through the source code of the Switch component, you'll see that it rather evilly reads the props of each of its children and manually applies react-router's matchPath method on each child's path (or from) prop to determine which one should be rendered.
So, what's happening in your case is Switch iterates through its children until it gets to your Authorize component. It then looks at that component's props, finding neither a path or from prop, and calls matchPath on an undefined path. As you note yourself, "a <Route> with no path always matches", so matchPath returns true, and Switch renders your Authorize component (ignoring any subsequent Routes or Redirects, since it believes it found a match). The nested '/admin' route inside your Authorize component doesn't match the current path however, so you get a null result back from the render.
I'm facing a similar situation at work. My plan to work around it is to replace react-router's Switch in my routing code with a custom component which iterates through its children, manually rendering each one in turn, and returning the result of the first one that returns something other than null. I'll update this answer when I've given it a shot.
Edit: Well, that didn't work. I couldn't work out a supported way to manually invoke "render" on the children. Sorry I couldn't give you a workaround to Switch's limitations.

In case anyone reads this in >= 2019, one way to deal with this behaviour is to simply wrap the Route-component like so:
import React from 'react'
import { Route } from 'react-router-dom'
type Props = {
permissions: string[]
componentWhenNotAuthorized?: React.ElementType
}
const AuthorizedRoute: React.FunctionComponent<Props> = ({
permissions,
componentWhenNotAuthorized: ComponentWhenNotAuthorized,
...rest
}) => {
const isAuthorized = someFancyAuthorizationLogic(permissions)
return isAuthorized
? <Route {...rest} />
: ComponentWhenNotAuthorized
? <ComponentWhenNotAuthorized {...rest} />
: null
}
export default AuthorizedRoute
Then, simply use it as such:
import React from 'react'
import { Route, Switch } from 'react-router-dom'
import AuthorizedRoute from 'some/path/AuthorizedRoute'
import Account from 'some/path/Account'
import Admin from 'some/path/Admin'
import Dashboard from 'some/path/Dashboard'
import NotFound from 'some/path/NotFound'
import Users from 'some/path/Users'
const AppRouter: React.FunctionComponent = () => (
<Switch>
<Route
component={Account}
path='/accounts'
/>
<AuthorizedRoute
component={Admin}
componentWhenNotAuthorized={NotFound}
path='/admin'
permissions={['view-admin']}
/>
<Route
component={Dashboard}
path='/dashboard'
/>
<Route
component={Users}
path='/users'
/>
<Route
component={NotFound}
/>
</Switch>
)
export default AppRouter

Similar idea to what Robert said, here's how I did it
class NullComponent extends React.Component {
shouldComponentBeRenderedByRoute() {
return false;
}
render() {
return null;
}
}
class CustomSwitch extends React.Component {
render() {
return (
// React.Children.map returns components even for null, which
const children = React.Children.toArray(this.props.children).map(child => {
const { render, shouldComponentBeRenderedByRoute } = child.type.prototype;
if (shouldComponentBeRenderedByRoute && !shouldComponentBeRenderedByRoute.call(child)) {
return null;
}
if (shouldComponentBeRenderedByRoute) {
return render.call(child);
}
return child;
});
return <Switch>{children}</Switch>;
);
}
}
then use it just do
<CustomSwitch>
<Route path... />
<NullComponent />
<Route path... />
</CustomSwitch>
here, a component without shouldComponentBeRenderedByRoute function is assumed to be a valid Route component from react-router, but you can add more condition (maybe use path props) to check if it's a valid Route