I'm trying to export two named modules from one component file and somehow keep getting the "Check the render method..." error.
Here's a look at my code.
App.jsx
import React from 'react';
import { MainRouter } from '../Router';
const App = () => (
<div className="card">
<MainRouter />
</div>
);
export default App;
Router.jsx - which is what's being imported above
import React, { Fragment } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PrivateRoute from './components/PrivateRoute';
import Header from './components/Header';
import AdminNav from './components/AdminNav';
import Calendar from './pages/Calendar';
import Search from './pages/Search';
import AdminLogin from './pages/AdminLogin';
import Admin from './pages/Admin';
import New from './pages/Admin/New';
import Users from './pages/Admin/Users';
let styles = {};
styles.body__wrapper = {
padding: '2%'
};
export const MainRouter = () => (
<Router>
<Fragment>
<div className="nav__wrapper">
<Header />
</div>
<div style={styles.body__wrapper}>
<Switch>
<Route exact path="/" component={Calendar} />
<Route path="/search/:name" component={Search} />
<Route path="/admin/signin" component={AdminLogin} />
<PrivateRoute path="/admin" component={Admin} />
</Switch>sasd
</div>
</Fragment>
</Router>
);
export const AdminRouter = (props) => (
<div className="container">
<Router>
<Fragment>
<AdminNav {...props}/>
<div className="my-3">
<Switch>
<Route path="/users" component={Users} />
<Route path="/new" component={New} />
</Switch>
</div>
</Fragment>
</Router>
</div>
);
I've tried doing export { MainRouter, AdminRouter } but doesn't seem to work as well.
Complete error message:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `MainRouter`.
I actually figured it out.
I was using several index.js on every route component and incorrectly configured the exports on almost all of them, causing the whole app to crash.
Related
This question already has an answer here:
Why I receive blank page? React
(1 answer)
Closed 19 hours ago.
I'm trying my hand at studying react. I want to create a simple template from bootstrap components, but react doesn't see the components when compiling.
app.js
import React from "react";
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';
function App() {
return(
<Router>
<Layout>
<Routes>
<Route exact path='/' component={Home} />
<Route exact path='/blog' component={Blog} />
<Route exact path='/blog/:id' component={BlogDetail} />
<Route exact path='/category/:id' component={Category} />
</Routes>
</Layout>
</Router>
);
};
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Home.js
import React from "react";
function Home(){
return(
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
);
};
export default Home;
import Navbar from '../components/Navbar'
const Layout = (props) =>(
<div>
<Navbar />
{props.children}
</div>
);
export default Layout
p.s. Navbar react sees, but the home component does not. There is no code even in the console, although they are identical in content.
Each route should show the layout navbar and load the component that is called by the route. Layout and Navbar are seen by the reactor, but everything else is not even reflected in the browser console.
You can upgrade to v6 and use an Outlet component in your Layout to do what you want using react-router-dom.
The Outlet allows nested UI to show up when child routes are rendered.
import { Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar'
const Layout = () => {
return (
<div>
<Navbar />
<main>
<Outlet />
</main>
</div>
);
};
export default Layout;
Also, your App component would need to be refactored like this:
function App() {
return(
<Router>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path='blog' element={<Blog />} />
<Route path='blog/:id' element={<BlogDetail />} />
<Route path='category/:id' element={<Category />} />
</Route>
</Routes>
</Router>
);
};
I'm creating a Google Clone. This is my current code for that. I read that I needed to changed the syntax from 'Switch' to 'Routes', given the update for react-router. I did just that and my "This is the search page" is not displaying inside of the browser.
import React from "react";
import './App.css';
import Home from './pages/Home';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
function App() {
return (
// BEM
<div className="app">
<Router>
<Routes>
<Route path="/search">
<h1>This is the search page</h1>
</Route>
<Route path="/">
<Home />
</Route>
</Routes>
</Router>
</div>
);
}
export default App;
you need to create each component speratly some things like this:
import React from 'react;
function Home(){
return(
<div>
<h1>Home</h1>
</div>
);
}
export default Home;
import React from 'react;
function Search(){
return(
<div>
<h1>Search</h1>
</div>
);
}
export default Search;
change index.js to :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById("root"));
change App.js to
import React, {useEffect} from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter ,Routes,Route} from 'react-router-dom';
import Search from '.........'
import Home from '.......'
function App(){
return(
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Home/>} />
<Route path="/search" element={<Search/>} />
<Routes>
</BrowserRouter>
);
}
export default App;
if(document.getElementById('app')){
ReactDOM.render(<App/>,document.getElementById('app'));
}
In react-router-dom#6 the Routecomponent API changed significantly. Thechildrenprop is only used for rendering nestedRoutecomponents. All routed content is now rendered on a singleelementprop taking aReactNode`, a.k.a. JSX.
Move the content from being wrapped into the element prop.
function App() {
return (
// BEM
<div className="app">
<Router>
<Routes>
<Route path="/search" element={<h1>This is the search page</h1>} />
<Route path="/" element={<Home />} />
</Routes>
</Router>
</div>
);
}
Route component expects 2 parameters path, and element.
Refer to the official doc here
function App() {
return(
<BrowserRouter>
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/search" element={<Search/>} />
<Routes>
</BrowserRouter>
);
}
I tried doing this and I had an error:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app.
I'm new to react and what I'm trying to do is making a universal router for all of my components. Is it a good idea to have all routes on a single file or have it on every file that needed it? Here are my code
Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import createRoutes from './routes';
const Routes = createRoutes();
ReactDOM.render(Routes,document.getElementById('root'))
routes.js:
import {BrowserRouter as Router,Route} from "react-router-dom";
// import {Home, Settings} from './routes/index'
import Home from './routes/Home'
import Settings from './routes/settings'
const createRoutes = () => (
<Router>
<Route exact path="/" component={Home}/>
<Route exact path="/home" component={Home}/>
<Route exact path="/settings" component={Settings}/>
</Router>
);
export default createRoutes
Edit: Here are my Home.js and Settings.Js Files:
Home.js:
import '../styles/home.scss'
import Cards from '../components/swiper'
import Slideshow from '../components/slideshow'
const home = ()=>{
let user = "user"
return(
<>
<Slideshow/>
<h1 className="welcome"> Welcome {user},</h1>
<div className="flex Create-Event">
<h2 className="title-headers">Featured events:</h2>
Create Event
</div>
<Cards/>
<h2 className="title-headers">Upcoming events:</h2>
<Cards/>
<div className="help flex">
<h2>Need assistance? </h2>
Contact Us!
</div>
</>
)
}
export default home
settings.js:
//todo : immport form and other types of settings related components here later on
function Settings() {
return (
<div>
<h1>Settings goes here</h1>
</div>
)
}
export default Settings
Instead of using a hook, use a regular function.
EDIT: Try this. Also, I just noticed you're using home hook, when you're calling Home in Router.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import createRoutes from './routes';
import MyRouter from "./MyRouter";
ReactDOM.render(
<MyRouter />,
document.getElementById('root'))
MyRouter.js
import {BrowserRouter as Router,Route,Routes} from "react-router-dom";
// import {Home, Settings} from './routes/index'
import Home from './routes/Home'
import Settings from './routes/settings'
function MyRouter() (
<Router>
<Routes>
<Route exact path="/" component={<Home />}/>
<Route exact path="/home" component={<Home />}/>
<Route exact path="/settings" component={<Settings />}/>
</Routes>
</Router>
);
export default MyRouter
Home.js
import '../styles/home.scss'
import Cards from '../components/swiper'
import Slideshow from '../components/slideshow'
function Home() {
let user = "user"
return(
<>
<Slideshow/>
<h1 className="welcome"> Welcome {user},</h1>
<div className="flex Create-Event">
<h2 className="title-headers">Featured events:</h2>
Create Event
</div>
<Cards/>
<h2 className="title-headers">Upcoming events:</h2>
<Cards/>
<div className="help flex">
<h2>Need assistance? </h2>
Contact Us!
</div>
</>
)
}
export default Home
settings.js
function Settings() {
return (
<div>
<h1>Settings goes here</h1>
</div>
)
}
export default Settings
I ran into the error:"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.".I don't know how to fix it! It'd be kind of you guys to help me! Thank you so much!
This is my Layout.jsx:
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Header from "./Header"
import Routes from '../routes/Routes'
const Layout = () => {
return (
<Router>
<Route render={props => (
<div>
<Header {...props}/>
<div className="container">
<div className="main">
<Routes/>
</div>
</div>
</div>
)}/>
</Router>
)
}
export default Layout
This is my Routes.jsx:
import React from 'react'
import {BrowserRouter as Router, Route, Switch} from "react-router-dom"
import Home from '../pages/Home';
import Catalog from '../pages/Catalog';
import Cart from "../pages/Cart";
import Product from '../pages/Product';
const Routes = () => {
return (
<Router>
<Switch>
<Route path='/' exact component={Home}/>
<Route path='/catalog:slug' component={Product}/>
<Route path='/catalog' component={Catalog}/>
<Route path='/cart' exact component={Cart}/>
</Switch>
</Router>
)
}
export default Routes
Unable to see the header text returned in my Home and Tutorials page in my react hooks site. Below is my App.js, Navigation.js and Home.js. Could someone please advise about the problem here.
App.js
import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import Tutorials from "./components/Tutorials";
import Navigation from './components/Navigation';
function App() {
return (
<BrowserRouter>
<Navigation>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/tutorials" component={Tutorials} />
</Switch>
</Navigation>
</BrowserRouter>
);
};
export default App;
Navigation.js
import React from 'react';
import { NavLink} from 'react-router-dom';
const Navigation = () => {
return (
<div className="App">
<div className="wrapper">
<div id="wrap">
<nav className="siteNavigation_nav_links">
<div className="row" ></div>
<div className="main_links_nav">
<NavLink className="mob_link" to="/">Home</NavLink>
<NavLink className="mob_link" to="/tutorials">Tutorials</NavLink>
</div>
</nav>
</div>
</div>
</div>
)
}
export default Navigation;
Home.js
import React from 'react';
const Home = () =>{
return (
<div className="App">
<h1>This is Home Page !</h1>
</div>
)
}
export default Home;
Tutorials.js
import React from 'react';
const Tutorials = () =>{
return (
<div><h1>This is Tutorials Page !</h1></div>
)
};
export default Tutorials;
Navigation is a Navbar component. And you want it everywhere on the site.
So, you can easily do it by using it outside the scope of the Switch component.
In doing so, it will render all over your screens.
<BrowserRouter>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/tutorials" component={Tutorials} />
</Switch>
</BrowserRouter>