We Keep Coding

Uncaught Error: [ItemListContainer] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

I'm programming in react, the truth is the first time that I program it in React.
in App.js I define the routes, I use the react-router-dom library, but I get the error of the title, the code is the following, what am I doing wrong, can you explain it to me, because I bring all the components.
import React from 'react';
import './App.css';
import 'materialize-css/dist/css/materialize.css';
import NavBar from './components/NavBar';
import ItemListContainer from './components/ItemListContainer';
import MoreSell from './components/ItemListMoreSell';
import ItemDetailContainer from './components/ItemDetailContainer';
import Cart from './components/Cart';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<div className="App">
<BrowserRouter>
<NavBar />
<MoreSell/>
<Routes>
<Route path="/" element={<ItemListContainer/>} />
<Route path="/category/:categoryID" element={<ItemListContainer/>} />
<Route path="/detail/:productID" element={<ItemDetailContainer/>} />
<Route path="/cart" element={<Cart/>} />
<ItemListContainer/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Thank you

ItemListContainer is causing the problem after the Cart route, since inside Routes you can only define route
function App() {
return (
<div className="App">
<BrowserRouter>
<NavBar />
<MoreSell/>
<Routes>
<Route path="/" element={<ItemListContainer/>} />
<Route path="/category/:categoryID" element={<ItemListContainer/>} />
<Route path="/detail/:productID" element={<ItemDetailContainer/>} />
<Route path="/cart" element={<Cart/>} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;

You have ItemListContainer/> as a child inside Routes>. Either delete this component, move it outside of Routes, or create a new route with it inside.
<Routes>
<Route path="/" element={<ItemListContainer/>} />
<Route path="/category/:categoryID" element={<ItemListContainer/>} />
<Route path="/detail/:productID" element={<ItemDetailContainer/>} />
<Route path="/cart" element={<Cart/>} />
<ItemListContainer/> //<-------------------------This is the error
</Routes>

I think the answer in your error message:
you need to remove < ItemListContainer /> from < Routes > ... </ Routes > container and move it to another place. For example:
function App() {
return (
<div className="App">
<BrowserRouter>
<NavBar />
<MoreSell/>
<Routes>
<Route path="/" element={<ItemListContainer/>} />
<Route path="/category/:categoryID" element={<ItemListContainer/>} />
<Route path="/detail/:productID" element={<ItemDetailContainer/>} />
<Route path="/cart" element={<Cart/>} />
</Routes>
<ItemListContainer/>
</BrowserRouter>
</div>
);
}

How to hide/show a component inside another component in ReactJS

I have my application looking something like below..
import FirstComponent from "./components/firstComponent";
import NextComponent from "./components/nextComponent";
import MyProgressComponent from "./components/progressComponent";
class App extends React.Component {
render() {
return (
<Router>
<div>
<MyProgressComponent />
<Route path="/" exact component={FirstComponent} />
<Route path="/nextComponent" component={NextComponent} />
</div>
</Router>
);
}
}
As we can see 'MyProgressComponent' is visible when we navigate between 'http://localhost:3000/' and 'http://localhost:3000/nextComponent' because it is directly nested under Router component in App component. But I want 'MyProgressComponent' to be visible only in 'http://localhost:3000/nextComponent' and hidden in 'http://localhost:3000/'. Any suggestion ?
I can do this by importing 'MyProgressComponent' inside each component wherever required but I don't want to duplicate it in each component.

You can render multiple components using the below syntax
<Route path="/nextComponent" render={() =>
<>
<MyProgressComponent />
<NextComponent />
</>
}
/>

Based on #Crocsx comment you can apply following check on your code.
<Router>
<div>
{this.props.location.pathname === "/nextComponent" ? <MyProgressComponent />: null}
<Route path="/" exact component={FirstComponent} />
<Route path="/nextComponent" component={NextComponent} />
</div>
</Router>

you can use switch provided by router to achieve this.
Something like below should work for you.
<Switch>
<Route exact path="/nextComponent" component={MyProgressComponent} />
</Switch>
<Switch>
<Route path="/" exact component={FirstComponent} />
<Route path="/nextComponent" component={NextComponent} />
</Switch>
more documentation is available here https://reacttraining.com/react-router/web/guides/basic-components

React router rendering wrong page

i am developing an web app and I am new to react router. Evrything was going great until I found myself in need to render a whole new page, with new navbar and all.
that's my app.js
class App extends Component {
render() {
return (
<BrowserRouter>
<div className='App'>
<Layout>
<Header />
<NavigationB />
<Search />
<Switch> {/* to swtich to the desired path. Nest all route here */}
<Route path='/' component={Home} exact />
<Route path='/login' component={Login} />
<Route path='/register-choice' component={RegisterButton} />
<Route path='/register-patient' component={RegisterPatient} />
<Route path='/register-professional' component={RegisterProf} />
<Route path='/profesional-dashboard' component={ProfessionalDashboard} />
</Switch>
</Layout>
<Footer />
</div>
</BrowserRouter>
);
}
}
So, I wanted to go to /professional-dashboard but without rendenring all the components above such and Header, Search, etc.
I tried to go to my index.js file and set it up like this
ReactDOM.render(
<BrowserRouter>
<Switch> {/* to swtich to the desired path. Nest all route here */}
<Route path='/' component={App} exact />
<Route path='/professional-dashboard' component=
{ProfessionalDashboard} />
</Switch>
</BrowserRouter>,
document.getElementById('root'));
The idea was, in my form whenever I press register, it should send me to the dashboard of the professional.
At the end of my Register.js file you would find
const WrappedRegistrationForm = Form.create()(RegisterProf);
ReactDOM.render(
<BrowserRouter>
<div>
<WrappedRegistrationForm />
</div>
</BrowserRouter>
, document.getElementById('root'));
export default WrappedRegistrationForm;
I am using Ant Design, so the form renders WrappedRegistrationForm. At first it was not working then I wrapped it around BrowserRouter, I don't get the error anymore, but now when I press the register button, it takes me to /professional-dashboard but it loads app.js and not ProfessionalDashboard.js
Funny thing is, if I refresh the page, it loads ProfessionalDashboard.js normally.
Hope I'm explaining myself well.
Glad if you can help me!!

Hi could try something like this rendering the top one first if its a match if not it will go on to render the rest of the app :) hope this is clear
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route exact path='/profesional-dashboard' component={ProfessionalDashboard} />
<StandarRoute path='/' component={MainPage} />
<Switch />
</BrowserRouter>
);
}
}
class MainPage extends Component {
render(){
return(
<div className='App'>
<Layout>
<Header />
<NavigationB />
<Search />
<Switch> {
<Route path='/' component={Home} exact />
<Route path='/login' component={Login} />
<Route path='/register-choice' component={RegisterButton} />
<Route path='/register-patient' component={RegisterPatient} />
<Route path='/register-professional' component={RegisterProf} />
</Switch>
</Layout>
<Footer />
</div>
)
}
}

Try including "exact" before component in your Route, or including "exact" before the 'To' in your Link

Try,
<Route exact path="/register" render={() => ( <Redirect to="/dashboard"/>)
Why do you render two times with reactDOM by the way? That might be what’s causing the issue too. Just exporting it and putting it in route component should suffice.

How to put a div inside a Switch with React Router?

I have an APP using React and Redux, and I wanted to load a NotFound component when the user enters an invalid route. I found online a way to solve that problem, that is by putting all the routes inside a switch, including the NotFound component.
The problem is that, in my app, I can't put all my routes inside a Switch because There is a single component that needs to be stretched to the entire page, while all the other components need to be inside a "container". The way I have it below (see the code), the NotFound component works for all cases, except when I'm on the "landing" component route (where the NotFound component always displays).
I tried to put the landing component inside the Switch with the "container" div but the app crashes.
Is there any way to solve this? (keeping the landing component out of the container, and the other components inside)
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Navbar />
<Route exact path="/" component={Landing} />
<div className="container">
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Route exact path="/profiles" component={Profiles} />
<Route exact path="/profile/:handle" component={Profile} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />
<PrivateRoute
exact
path="/create-profile"
component={CreateProfile}
/>
<PrivateRoute
exact
path="/edit-profile"
component={EditProfile}
/>
<PrivateRoute
exact
path="/add-experience"
component={AddExperience}
/>
<PrivateRoute
exact
path="/add-education"
component={AddEducation}
/>
<PrivateRoute
exact
path="/edit-education/:id"
component={EditEducation}
/>
<PrivateRoute exact path="/feed" component={Posts} />
<PrivateRoute exact path="/post/:id" component={Post} />
<Route component={NotFound}/>
</Switch>
</div>
<Footer />
</div>
</Router>
</Provider>
);
}
}

You can make a separate router for all other components except landing page.
// App.js
import NonLandingPages from './NonLandingPages';
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Navbar />
<Switch>
<Route exact path="/" component={Landing} />
<Route component={NonLandingPages}/>
</Switch>
<Footer />
</div>
</Router>
</Provider>
);
}
}
Separate router for all other pages
// NonLandingPages.js
class NonLandingPages extends Component {
render() {
return (
<div className="container">
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Route exact path="/profiles" component={Profiles} />
<Route exact path="/profile/:handle" component={Profile} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />
<PrivateRoute
exact
path="/create-profile"
component={CreateProfile}
/>
<PrivateRoute
exact
path="/edit-profile"
component={EditProfile}
/>
<PrivateRoute
exact
path="/add-experience"
component={AddExperience}
/>
<PrivateRoute
exact
path="/add-education"
component={AddEducation}
/>
<PrivateRoute
exact
path="/edit-education/:id"
component={EditEducation}
/>
<PrivateRoute exact path="/feed" component={Posts} />
<PrivateRoute exact path="/post/:id" component={Post} />
<Route component={NotFound}/>
</Switch>
</div>
);
}
}

Attempting to pass a custom attribute into react router (using v4)

I have the following render method in my App.js:
render() {
return (
<LocaleProvider locale={enUS}>
<Router history={history}>
<div>
<Header />
<Switch>
<Route exact path={home} component={requireAuth(Groups)} />
<Route exact path={groups} component={requireAuth(Groups)} />
<Route path={addcard} component={requireAuth(AddCard)} />
<Route path={db} component={requireAuth(DbTbl)} />
<Route component={NoMatch} />
</Switch>
</div>
</Router>
</LocaleProvider>
);
};
And I want to pass in a custom property to the first 2 routes ({home} & {groups}) so I'm attempting to do something like this:
render() {
const groups1 = () => <Groups studyState={this.toggleStudyState}/>;
return (
<LocaleProvider locale={enUS}>
<Router history={history}>
<div>
<Header />
<Switch>
<Route exact path={home} render={requireAuth(groups1)} />
<Route exact path={groups} render={requireAuth(groups1)} />
<Route path={addcard} component={requireAuth(AddCard)} />
<Route path={db} component={requireAuth(DbTbl)} />
<Route component={NoMatch} />
</Switch>
</div>
</Router>
</LocaleProvider>
);
};
But I'm getting this error message from react router:
connectAdvanced.js:3 Uncaught TypeError: Cannot call a class as a
function
So I suspect react router doesn't like the high order component syntax with the render= attribute. How can I pass the studyState attribute into the Groups component being used with the first two tags?

The render property must have a function passed to it. You are giving a Class.
Write something like that:
<Route exact path={home} render={(routerProps) => {
const AuthGroups = requireAuth(Groups);
return <AuthGroups studyState={this.toggleStudyState}/>;
}} />
As I don't know how the requireAuth works, I don't know if the studyState property will be properly passed to the Group component. But I guess it will.
Now to have a cleaner code (if the above solution works):
renderAuthGroups(routerProps) {
const AuthGroups = requireAuth(Groups);
return <AuthGroups studyState={this.toggleStudyState}/>;
}
render() {
return (
<LocaleProvider locale={enUS}>
<Router history={history}>
<div>
<Header />
<Switch>
<Route exact path={home} render={this.renderAuthGroups.bind(this)} />
<Route exact path={groups} render={this.renderAuthGroups.bind(this)} />
<Route path={addcard} component={requireAuth(AddCard)} />
<Route path={db} component={requireAuth(DbTbl)} />
<Route component={NoMatch} />
</Switch>
</div>
</Router>
</LocaleProvider>
);
};