I was trying to create a simple react app using create-react-app. I wanted to use react-router and test that I have the routing set up nicely. However, when I tried to run the app using npm start, I am just seeing a white screen and this really confused me as I cannot find a source for my error.
This is my package.json file.
{
"name": "blog",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
My index.js
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import Home from "./Components/Home";
import Error from "./Components/Error";
import Blog from "./Components/Blog";
//switch ensures the rendering of only one component
// Route tag are the links b/w the components and placed b/w switch tags
function App() {
return (
<Router>
<div className="App">
<ul>
<li>
<Link to="/">Home </Link>
</li>
<li>
<Link to="/blog">Blog </Link>
</li>
</ul>
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/blog" component={Blog} />
<Route component={Error} />
</Switch>
</div>
</div>
</Router>
);
}
export default App;
You need to put
ReactDOM.render(<App/>, document.getElementById('root'));
Somewhere to tell react inside which HTML element to put all the components
Related
I am building [this react tutorial][1] but get stuck at the beginning because my react components are not being recognized.
Here is my code:
import React from 'react';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import './App.scss';
import Header from "./components/Header/Header";
import Home from "./components/Home/Home";
import MovieDetails from "./components/MovieDetails/MovieDetails";
import Footer from "./components/Footer/Footer";
import PageNotFound from "./components/PageNotFound/PageNotFound";
function App() {
return (
<div className="app">
<Router>
<Header></Header>
<Routes>
<Route path="/" component= {Home} />
<Route path="/movie/:imdbID" component={MovieDetails}/>
<Route element={PageNotFound}/>
</Routes>
<Footer />
</Router>
</div>
);
}
export default App;
Basically, it recognizes the imported components but it does not display them in the correct yellow font color. Also, when I run the app only the footer and the header and footer are present. None of the routes work.
Here is the basic Home, Header, and footer component respectively.
import React from 'react'
const Home = () => {
console.log("hello");
return (
<div>Home</div>
)
}
export default Home;
import React from 'react'
const Header = () => {
return (
<div>Header</div>
)
}
export default Header
import React from 'react'
const Footer = () => {
return (
<div>Footer</div>
)
}
export default Footer
This is my package.json:
{
"name": "movie-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Check your React router version, the tutorial seems to be old, and those are deprecated components. this may help
https://reactrouter.com/docs/en/v6/upgrading/v5
check your packag.json and chose the best method for the version you are using.
I can't seem to figure out why my router routes aren't rendering. I am in the very beginning of building my app so there isn't much code and I've tried several different methods and still nothing. I just have div's right now in the components i'm trying to route and the text inside isn't coming up - they were working when I had just the components in my App.js file before I tried routing them. Any ideas?
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route} from 'react-
router-dom'
import Main from './components/Main';
import AddUser from './components/AddUser';
import EditUser from './components/EditUser';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Home</h1>
</header>
<Router>
<Routes>
<Route exact path="/" component={Main} />
<Route path="/AddUser" component={AddUser} />
<Route path="/edit" component={EditUser} />
</Routes>
</Router>
</div>
);
}
export default App;
// My JSON file \
{
"name": "w15-crud",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^2.1.3",
"reactstrap": "^9.0.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The react-router-dom#6 Route component API changed. There is no longer a component prop for rendering routed components. Use the element prop and pass a ReactNode, a.k.a. JSX.
See Routes and Route
declare function Route(
props: RouteProps
): React.ReactElement | null;
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactNode | null;
index?: boolean;
path?: string;
}
Example:
<Router>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/AddUser" element={<AddUser />} />
<Route path="/edit" element={<EditUser />} />
</Routes>
</Router>
ALERT: My english is not good.
Hello everybody, I'm getting started with React and I installed react-router-dom for my project. I read the documentation and I have followed step by step what it said, but is not work for me. The problem is when I add in App.js.
This is my App.js component:
import '.App.css'
import { Routes, Route } from 'react-router-dom';
import Home from './views/home/Home';
function App() {
return (
<div className="App">
<h1>Welcome to React Router !</h1>
<Routes>
<Route path="/" element={<Home />}/>
</Routes>
</div>
);
}
export default App;
and my Home component is:
import React from "react";
import { Link } from 'react-router-dom';
function Home() {
return(
<>
<main>
<h1>Welcome to Lukson Passwords</h1>
<p>You can do this, I believe in you.</p>
</main>
<nav>
<Link to="/about">About</Link>
</nav>
</>
);
}
export default Home();
package.json:
{
"name": "",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
This not work, when I load my page this one shows nothing, but if I delete from my App.js it works fine.
Does anyone know what is going on?
Thank you so much, and sorry for my english xd
You should wrap your app with BrowserRouter. Let's see what happens when you do that
I am tring to use the react router dom to make different pages so that it can go to different pages on click but the app does not compile since browser router is not being imported. I just copy pasted it straight from the website. Can someone tell me where the mistake is and how to fix it
App,js
import React from 'react';
import Header from './components/Header';
import Home from './components/Home';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router'
import Detail from './components/Detail';
function App() {
return (
<div className='App'>
<Router>
<Header />
<Switch>
<Route path='detail'>
<Detail />
</Route>
<Route path='/'>
<Home />
</Route>
</Switch>
</Router>
<Home />
</div>
)
}
export default App;
package.json
{
"name": "disneyplus-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.6.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.1.0",
"react-scripts": "4.0.3",
"react-slick": "^0.28.1",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
You are using version 6 of react-router-dom and you don't have react-router specified in your package.json file.
Import the components from react-router-dom and convert to using the RRDv6 components. The Switch component was replaced by a Routes component that must wrap the Route components. The Route components also now render their routed components on the element prop as JSX.
import React from 'react';
import Header from './components/Header';
import Home from './components/Home';
import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Detail from './components/Detail';
function App() {
return (
<div className='App'>
<Router>
<Header />
<Routes>
<Route path='detail' element={<Detail />} />
<Route path='/' element={<Home />} />
</Routes>
</Router>
<Home />
</div>
)
}
I have been trying to render these codes, but they do not work, and I get errors,I try different ways, the latest was installing v6 of react-router, I will appreciate if you help me;
import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
ReactDOM.render(
<Router>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>,
document.getElementById("root")
);
function Home() {
return (
<div>
<h1>Home route</h1>
</div>
);
}
reportWebVitals();
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2",
"react-router-dom": "^6.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Error:
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:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.