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
Related
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>
);
}
This question already has an answer here:
React router routers not showing
(1 answer)
Closed 4 months ago.
Intro
I had created a react starter application
Problem
I had created a 3 components in /src/pages named AddCoupon, Addvertical, Addmetadata. Now then I created a file Routes.js in /src.
Routes.js
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import AddCoupon from './pages/addCoupon';
import AddMetadata from './pages/addMetadata';
import AddVertical from './pages/addVertical';
import Login from './pages/login';
const Routes = () => {
return (
<>
<Router>
<Switch>
<Route path="/addcoupon">
<AddCoupon />
</Route>
<Route path="/addmetadata">
<AddMetadata />
</Route>
<Route path='/addvertical'>
<AddVertical />
</Route>
<Route path="/">
<Login />
</Route>
</Switch>
</Router>
</>
)
}
export default Routes
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router >
<App />
</Router>
</React.StrictMode>
);
reportWebVitals();
What I want?
So basically what I want is that when I type http:localhost:3000/addcoupon, it should render AddCoupon Component and same for other 2 components but right now it's showing nothing.
I dont want to use any navbar. What I want is simply when I hit the endpoints mentioned in Route.js, it should render that component.
Router 6 uses different syntax compared to earlier versions. Please check out the documentation:
https://reactrouter.com/en/v6.3.0/getting-started/overview
For your particular case, you need to remove switch, and pass element to route, and wrap all Route elements in Routes element, like so:
const Routes = () => {
return (
<>
<Routes>
<Route path="/addcoupon" element={<AddCoupon />}/>
<Route path="/addmetadata" element={<AddMetadata />}/>
<Route path='/addvertical' element={<AddVertical />}/>
<Route path="/" element={<Login />}/>
</Routes>
</>
)
}
In order for routes to work, you also need to wrap App element in Router element, like below:
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import './styles/index.scss'
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
)
Final step, render Routes inside of App element or wherever you want to use it:
const App = () => {
return <Routes/>
}
I'm having trouble with this simple react routing. The problem is that after I click on "Go to invoices" or "Go to eshop", the URL changes, but the page content remains the same. It only changes if I am at localhost:1234/eshop (or /dashboard) and reload the page.
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
export default function App() {
return (
<Router>
<h1>Default layout</h1>
<Link to="/invoices">Go to invoices</Link>
<Link to="/eshop">Go to eshop</Link>
<Route path="/invoices">
<h2>Invoices page</h2>
</Route>
<Route path="/eshop">
<h2>eshop page</h2>
</Route>
</Router>
);
}
Any ideas how to fix this?
edit
sandbox here https://codesandbox.io/s/hungry-cloud-i2hui2?file=/src/App.js
It's a clash between React Router and StrictMode.
One possible solution is to place the Router outside of StricMode, in the index.js file itself:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<Router>
<StrictMode>
<App />
</StrictMode>
</Router>
);
See: here and here
You should wrap your Route components with a Switch component.
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
export default function App() {
return (
<Router>
<h1>Default layout</h1>
<Link to="/invoices">Go to invoices</Link>
<Link to="/eshop">Go to eshop</Link>
<Switch>
<Route path="/invoices">
<h2>Invoices page</h2>
</Route>
<Route path="/eshop">
<h2>eshop page</h2>
</Route>
</Switch>
</Router>
)
}
https://v5.reactrouter.com/web/guides/quick-start
I know this question has been asked a lot and I've looked at quite a lot of answers and articles including one on how to upgrade from React Router V5 to V6 since I'm used to V5. However, V6 is giving me a weird issue which I don't know how to fix or what am I doing wrong.
Here's my code below
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Login from './components/dashboard/Login';
import Profile from './components/dashboard/Profile';
import './resources/style/tutorApp.css';
export default class App extends Component {
static displayName = App.name;
render () {
return (
<Router>
<Routes>
<Route path="/" element={ <Profile /> } />
<Route path="/Login" element={ <Login /> } />
</Routes>
</Router>
);
}
}
Profile.js
import React, { Component } from 'react';
class Profile extends Component {
render() {
return (
<div>
<h1>This is my Profile Page.</h1>
</div>
);
}
}
export default Profile;
Login.js
import React, { Component } from 'react';
class Login extends Component {
render() {
return (
<div>
<h1>This is my Login page.</h1>
</div>
);
}
}
export default Login;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');
ReactDOM.render(
<BrowserRouter basename={baseUrl}>
<App />
</BrowserRouter>,
rootElement);
registerServiceWorker();
I just get a blank window in the browser. Nothing is rendered!
What is the problem?
You are mounting a router inside another router.
In ReactDom.render you're wrapping your app in BrowserRouter.
import { BrowserRouter } from 'react-router-dom';
// ...
ReactDOM.render(
<BrowserRouter basename={baseUrl}> // <-- this is the outer browser router
<App />
</BrowserRouter>,
rootElement
);
However inside your app you mount another BrowserRouter in your render method.
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
// ...
render () {
return (
<Router> // <-- this is the nested browser router
<Routes>
<Route path="/" element={ <Profile /> } />
<Route path="/Login" element={ <Login /> } />
</Routes>
</Router>
);
}
To fix the problem simply remove one or the other.
The rest of your code looks fine.
So i made a portfolio site in React that works fine until you click on one of my github links and then try to go back to the portfolio page.
When going back or type a specifict path in URL you will get a GH-pages 404 file not found page.
Im a real beginner when it comes to React and i dont know how to fix this.
Im guessing its something with the BrowserRouter but i dont know.
Here's my Index.js file:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:
reportWebVitals();
and here's my app.js file:
import React from "react";
import AboutSection from "./components/AboutSection";
//Global Style
import GlobalStyle from "./components/GlobalStyle";
// Import Pages
import AboutMe from "./pages/AboutMe";
import ContactMe from "./pages/ContactMe";
import MyWork from "./pages/MyWork";
import Nav from "./components/Nav";
import WorkDetail from "./pages/WorkDetail";
//Router
import { Switch, Route, useLocation } from "react-router-dom";
//Animation
import { AnimatePresence } from "framer-motion";
import ScrollTop from "../src/components/ScrollTop";
function App() {
const location = useLocation();
return (
<div className="App">
<GlobalStyle />
<Nav />
<AnimatePresence exitBeforeEnter>
<Switch location={location} key={location.pathname}>
<Route path="/" exact component={AboutMe}>
<AboutMe />
</Route>
<Route path="/work" exact>
<MyWork />
</Route>
<Route path="/work/:id">
<WorkDetail />
</Route>
<Route path="/contact">
<ContactMe />
</Route>
</Switch>
<ScrollTop />
</AnimatePresence>
</div>
);
}
export default App;