I am learning basic crud operations in React, and ran into this problem. In the components, I am primarily expecting to see one word in each page. But when I am starting the react app, pages appear to be blank. I guess I missed something about react-router or react-router-dom. Codes are given here.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
App.js
import React from "react";
import ReactDOM from "react-dom/client";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
import books from "./components/books.jsx";
import add from "./components/add.jsx";
import update from "./components/update.jsx";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element= {<books />} />
<Route path="/add" element= {<add />} />
<Route path="/update" element= {<update />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
books.jsx
import React from "react";
const books = () => {
return (
<div>books</div>
)
}
export default books;
add.jsx
import React from "react";
const add = () => {
return (
<div>add</div>
)
}
export default add;
update.jsx
import React from "react";
const update = () => {
return (
<div>Update</div>
)
}
export default update;
Sub-directories and files in client directory
enter image description here
Codes may seem incomplete as I have encountered this problem at the halfway. I tried some fixes from youtube and google, but could not right it.
React components are Capitalized. From JSX in Depth:
User-Defined Components Must Be Capitalized
When an element type starts with a lowercase letter, it refers to a
built-in component like <div> or <span> and results in a string
'div' or 'span' passed to React.createElement. Types that start
with a capital letter like <Foo /> compile to
React.createElement(Foo) and correspond to a component defined or
imported in your JavaScript file.
By using <book /> React assumes this is an HTML element and doesn't create a React element from your component code.
import React from "react";
const Books = () => {
return (
<div>books</div>
)
}
export default Books;
import Books from "./components/books.jsx";
import Add from "./components/add.jsx";
import Update from "./components/update.jsx";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Books />} />
<Route path="/add" element={<Add />} />
<Route path="/update" element={<Update />} />
</Routes>
</BrowserRouter>
</div>
);
}
Related
Hi! I try do to links in react and all time i got that errors as on screen minimum 8 sometimes i got 32 and I don't know how to fix
App.jsx
import { Layout } from "./Components/Layout";
import { Routes, Route, Link } from 'react-router-dom'
function App() {
return (
<>
<Routes>
<Route path="/" element={<Layout />} />
</Routes>
</>
);
}
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>
);
Layout.jsx
import { Link, Outlet } from 'react-router-dom'
const Layout = () => {
return (
<>
<header>
<Link to="/">Home</Link>
<Link to="/posts">Blog</Link>
<Link to="/about">About</Link>
</header>
</>
)
}
export {Layout}
This code I making using tutorials from Youtube and official documentations but it don't work.
Please help. Thank
Routes need to be inside a tag or within a router created using createBrowserRouter.
In index.JS import BrowserRouter and replace React.StrictMode with it. Strict mode can cause things to render multiple times so I usually get rid of it.
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from “react-router-dom”;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
You should use all routing related actions under router context. You can achieve this by using BrowserRouter component as an HOC for <App />. You can find more here: https://reactrouter.com/en/main/router-components/browser-router
The Routes should have been wrapped by BrowserRouter component. It should look like this:
import { Layout } from "./Components/Layout";
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App
My route set up returns a blank page with no error, the only thing that's showing up is the side menu. I don't know what I'm doing wrong?
App.js:
import React from "react";
import Sidebar from "./components/Sidebar";
import i18n from './i18n';
import Dash from "./pages/Dash";
import Prof from "./pages/Prof";
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<Router>
<Sidebar/>
<Routes>
<Route path='/' exact component={Dash} />
<Route path='/profile' exact component={Prof} />
</Routes>
</Router>
);
}
export default App;
Dash.js:
import React from "react";
import Dashboard from ".././components/Dashboard";
export default function Dash() {
return (
<>
<Dashboard />
</>
);
}
Prof.js:
import React from "react";
import Dashboard from ".././components/Profile";
export default function Prof() {
return (
<>
<Profile />
</>
);
}
I assume you are using React Router Dom v6 since you are using Routes instead of Switch, in which case it should be element, not component, the propriety where you pass that component for that route. Also, call the component when passing it, like so:
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import Dash from "./pages/Dash";
import Prof from "./pages/Prof";
function App() {
return (
<Router>
<Sidebar />
<Routes>
<Route path="/" exact element={<Dash />} />
<Route path="/profile" exact element={<Prof />} />
</Routes>
</Router>
);
}
export default App;
⚠️: notice it's element={<Dash />} and not element={Dash}.
That's not how you use Routes object. You must use Routes > Route as a declaration. In order to go for what your trying which is to render a component based on url, you must use Outlets.
https://reactrouter.com/docs/en/v6/api#outlet
I have problem with router-dom. I am working according to youtube tutorial, I cannot resolve below error:
[landingPageLayout] is not a component. All component children of must be a or <React.Fragment>. I would be greateful for some guidance.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
App.js
import './App.css';
import { Routes, Route } from 'react-router-dom';
import landingPageLayout from './components/layouts/landingPageLayout';
import homePage from './components/pages/homePage';
const App = () => {
return (
<Routes>
<landingPageLayout>
<Route path="/">
<homePage/>
</Route>
</landingPageLayout>
</Routes>
);
}
landingPageLayout.js
import React from 'react';
import Header from '../navigation/header';
const landingPageLayout = ({...otherProps}) => {
return (
<div>
<Header/>
</div>
)
}
export default landingPageLayout;
As Nicholas said in comments, your react components should always be capitalized.
Other than that, Routes component only accepts or <React.Fragment> as children so you can't add your layout like that. What you can do is something like this:
const App = () => {
return (
<Routes>
<Route
path='/*'
element={
<LandingPageLayout>
<HomePage />
</LandingPageLayout>
}
/>
</Routes>
);
}
If you have several routes that need this layout, you should replace HomePage with another component that has all the routes. For example we can call it PrivateRoutes. Then in code above you replace <HomePage /> with <PrivateRoutes /> and then your PrivateRoutes component should look like this:
const PrivateRoutes = () => {
return (
<Routes>
<Route path="home" element={<HomePage />} />
<Route path="page1" element={<Page1 /> />
//rest of routes
</Routes>
);
}
I have this fully functional and very basic code:
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter, Route, Switch} from "react-router-dom";
import Home from "./App/home.jsx";
import About from "./App/about.jsx";
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home}></Route>
<Route path="/About" component={About}></Route>
</Switch>
</BrowserRouter>,
document.getElementById("main")
);
I realise that no matter what, Home and About components is always going to be loaded, but not always used.
How can I fix this? I've tried:
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter, Route, Switch} from "react-router-dom";
import Home from "./App/home.jsx";
import About from "./App/about.jsx";
let path = require("path");
function C(file) {
return function(obj) {
let url = path.join("./App", file);
let C = require(url);
return <C {...obj}/>
}
}
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path="/" component={C("home.jsx")}></Route>
<Route exact path="/" component={C("about.jsx")}></Route>
</Switch>
</BrowserRouter>,
document.getElementById("main")
);
But then, it doesn't get rendered.
So is there any way that I can load only the components I need for the current web page.
perhaps using code splitting in this fashion
https://reactjs.org/docs/code-splitting.html
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}
So perhaps your code could be like this
I have this fully functional and very basic code:
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter, Route, Switch} from "react-router-dom";
const Home= React.lazy(() => import('./App/home.jsx'));
const About= React.lazy(() => import('./App/about.jsx'));
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home}></Route>
<Route path="/About" component={About}></Route>
</Switch>
</BrowserRouter>,
document.getElementById("main")
);
You can use React-Loadable package for the use-case you mentioned above. Example code is shown below, follow along with it.
import Loadable from 'react-loadable';
const loading = () => (
<div>
Loading... //Custom loader
</div>
);
const AsyncLogin = Loadable({
loader: () => import('./Login/index.jsx'),
loading: loading,
});
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path='/login' component={AsyncLogin} />
</Switch>
</BrowserRouter>,
document.getElementById("main"));
You can find the react-loadable documentation here. Or alternatively, you can configure Webpack and achieve the required results.
I am working on a simple React/Redux/Rails project and I am having an issue loading the form. I have a Router set up which holds the routes on my App.js page
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import '../App.css';
import Navbar from '../components/Navbar'
import Home from '../components/Home'
import Games from './Games'
import GamesShow from './GamesShow';
import GameForm from './GameForm';
class App extends Component {
render() {
return (
<Router>
<div>
<Navbar />
<Switch>
<Route exact path = '/' component={Home} />
<Route exact path = '/games' component={Games} />
<Route exact path = '/games/:id' component={GamesShow} />
<Route exact path = '/games/new' component={GameForm} />
</Switch>
</div>
</Router>
);
}
}
export default App;
There is a link on another page that goes to /games/new.
<Link to="/games/new" exact>Add a new Game</Link>
The page loads under the url, but the page is black except for the Navbar component. I should mention that I am not even trying to load a form yet, just some sample text. I am importing everything so I know my importing/exporting is not the problem.
import React, { Component } from 'react';
class GameForm extends Component {
render() {
return(
<div>
Add a new game to the List
<form onSubmit={this.handleOnSubmit}>
<div>
<label htmlFor="name">Name:</label>
</div>
</form>
</div>
)
}
}
export default GameForm
Things get weird when I remove new from /games/new and comment out the original games route, it will then load the GameForm Component under the url games, but then I add /new back, it stops working. Now I think that covers everything, but here is my index.js just in case.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux'
import store from './store'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
serviceWorker.unregister();
You need to move '/games/new' above '/games/:id'
Like so:
<Switch>
<Route exact path = '/' component={Home} />
<Route exact path = '/games' component={Games} />
<Route exact path = '/games/new' component={GameForm} />
<Route exact path = '/games/:id' component={GamesShow} />
</Switch>
It needs to come before the dynamic path...