This is my App.js
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import MainRoutes from './routes/MainRoutes';
import AuthRoutes from './routes/AuthRoutes';
import './styles/layout.css';
const App = () =>{
return (
<div className="App">
<Router>
<AuthRoutes />
<MainRoutes />
</Router>
</div>
);
}
export default App;
I am making a blog website but whenever I'm compiling my code the browser shows me nothing
Console is also empty, has nothing to understand that where my code is wrong, it have multiple warnings.
this is my MainRoutes.js
import React from 'react'
import {Routes, Route} from 'react-router-dom'
import {ScrollToTop} from '../components/shared'
import ProfileScreen from '../screens/Settings/ProfileScreen'
import DetailsScreen from '../screens/Public/DetailsScreen'
import UploadScreen from '../screens/Public/UploadScreen'
import EditScreen from '../screens/Settings/EditScreen'
import UserScreen from '../screens/Public/UserScreen'
import DashboardScreen from '../screens/Settings/DashboardScreen'
import CategoryScreen from '../screens/Public/CategoryScreen'
const MainRoutes = () => {
return (
<ScrollToTop>
<Routes>
<Route path='/search/:keyword' component={UploadScreen} exact/>
<Route path='/category/:category' component={UploadScreen} exact/>
<Route path='/category' component={CategoryScreen} exact/>
<Route path='/post/:id/edit' component={EditScreen} exact/>
<Route path='/my_posts' component={DashboardScreen} exact/>
<Route path='/post/:id' component={DetailsScreen} exact/>
<Route path='/profile' component={ProfileScreen} exact/>
<Route path='/user/:id' component={UserScreen} exact/>
<Route path='/' component={UploadScreen} exact/>
</Routes>
</ScrollToTop>
)
}
export default MainRoutes;
This is my AuthRoutes.js
import React from 'react'
import {Route, Routes} from 'react-router-dom'
import LoginScreen from '../screens/Auth/LoginScreen'
import SignUpScreen from '../screens/Auth/SignUpScreen'
import ScrollToTop from '../components/shared/ScrollToTop'
const AuthRoutes = () => {
return (
<ScrollToTop>
<Routes>
<Route path='/login' element={LoginScreen}/>
<Route path='/signup'element={SignUpScreen}/>
</Routes>
</ScrollToTop>
)
}
export default AuthRoutes;
its my Package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^2.4.6",
"#cloudinary/react": "^1.9.0",
"#cloudinary/url-gen": "^1.8.7",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#redux-devtools/extension": "^3.2.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#tinymce/tinymce-react": "^4.2.0",
"antd": "^5.1.6",
"axios": "^1.2.6",
"bootstrap": "^5.2.3",
"combine-reducers": "^1.0.0",
"firebase": "^9.15.0",
"framer-motion": "^8.0.2",
"froala-editor": "^4.0.16",
"jwt-decode": "^3.1.2",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-loader-spinner": "^5.3.4",
"react-quill": "^2.0.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.8.1",
"react-scripts": "^5.0.1",
"react-use-googlelogin": "^0.12.5",
"redux": "^4.2.1",
"redux-thunk": "^2.4.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"
]
},
"devDependencies": {
"css-loader": "^6.7.3"
}
}
Please help me to get out of this, every piece of advice will be appreciated.
You're still using the old props for specifing the components for your routes. See upgrading from v5 on the React Router Dom docs.
You should pass the element prop the jsx component. This is the same for all your other Route components.
<Route path='/login' element={<LoginScreen />}/>
// and
<Route path='/search/:keyword' element={<UploadScreen />} exact/>
Instead of
<Route path='/login' element={LoginScreen}/>
// and
<Route path='/search/:keyword' component={UploadScreen} exact/>
Related
HashRouter doesn't render anything on GitHub pages and the console doesn't show any errors either. Also it renders locally only if I put a # before the app name so instead of typing: localhost:3000/chat-app I have to type localhost:3000/#/chat-app.
App.js
import SignIn from './Components/SignIn';
import SignUp from './Components/SignUp';
import Home from './Components/Home';
import UserProfile from './Components/UserProfile';
import { HashRouter, Routes, Route } from 'react-router-dom'
function App() {
return (
<HashRouter>
<Routes>
<Route path="/chat-app" exact element={<Home />} />
<Route path="/chat-app/signIn" exact element={<SignIn />} />
<Route path="/chat-app/signUp" exact element={<SignUp />} />
<Route path="/chat-app/userProfile" exact element={<UserProfile />} />
</Routes>
</HashRouter>
);
}
export default App;
package.json:
{
"homepage": "https://melosshabi.github.io/chat-app",
"name": "chat-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"firebase": "^9.16.0",
"nanoid": "^4.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.0",
"react-scripts": "5.0.1",
"universal-cookie": "^4.0.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
},
"devDependencies": {
"gh-pages": "^5.0.0"
}
}
I have tried some fixes I found online but none of them work. If you need the repo link here it is: https://github.com/melosshabi/chat-app
I have tried changing the import from: import { HashRouter as Router, Routes, Route } from 'react-router-dom'
to: import { HashRouter, Routes, Route } from 'react-router-dom'
I have tried changing the app name.
I also tried changing :<Route path="/chat-app/home" element={<Home />} />
to: <Route path="/chat-app" exact element={<Home />} />
Remove "/chat-app" from all the routes since including this would make the absolute URLs https://melosshabi.github.io/chat-app/#/chat-app and https://melosshabi.github.io/chat-app/#/chat-app/signin, etc.
If necessary you can specify a basename prop on the router. I don't think it will be required in your case.
There is also no exact prop on the Route component; in RRDv6 all routes are always exactly matched.
function App() {
return (
<HashRouter basename="/chat-app"> // <-- if necessary
<Routes>
<Route path="/" element={<Home />} />
<Route path="/signIn" element={<SignIn />} />
<Route path="/signUp" element={<SignUp />} />
<Route path="/userProfile" element={<UserProfile />} />
</Routes>
</HashRouter>
);
}
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>
App.js
import React, {Component} from 'react';
import './App.css';
import About from './about';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div className='App'>
<Route path="/abou" component={About} />
</div>
</Router>
);
}
}
export default App;
about.js
import React from 'react'
const about = () => {
return (
<div>about</div>
)
}
export default about
package.json
{
"name": "react-router",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#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"
]
}
}
Doubt???????????????????????????????????????????????????????????????????????????
I have installed react-router-dom as you can see in the package.json file but though it is compiling correctly, I am unable to see anything. What could be the error please let me know?
The component Route should be a child of the component Routes and in Route component you have to use the property element to specify the component to render instead of the property component.
import React, {Component} from 'react';
import './App.css';
import About from './About';
import Home from './Home';
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div className='App'>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/" element={<Home />} />
</Routes>
</div>
</Router>
);
}
}
export default App;
I noticed that you have confusion between react-router v5 and v6 (you are using v6)
So for more information about react-router v6 visit the official react-router documentation website : https://reactrouter.com/docs/en/v6
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>
)
}