I have a simple react page with a navbar and a single route.
App.js:
import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/navbar.component"
import CreateUser from "./components/create-user.component";
function App() {
return (
<Router>
<div className="container">
<Navbar />
<br />
<Route path="/user" component={CreateUser} />
</div>
</Router>
);
}
export default App;
create-user.component.js:
import React, { Component } from 'react';
export default class CreateUser extends Component {
render() {
return (
<div>
<p>You are on the Create User component!</p>
</div>
)
}
}
The navbar displays ok but if I add in the route the navbar disappears and the routed page doesn't work.
Try this:
<Route path="/user" element={<CreateUser />} />
downgrading react router dom "resolved" the issue, not ideal but at least it works now :)
npm uninstall react-router-dom && npm install react-router-dom#5.2.0
if you are using react-router-v6 then component don't support anymore this is the correct syntax
<BrowserRouter>
<div className="container">
<Navbar />
<br />
<Routes>
<Route path="/user" element={<CreateUser />} />
<Route path="*" element={<Navigate to="/user" />} />
</Routes>
</div>
</BrowserRouter>
i also recommend go through documentation first because there is quite changes in react router
React Router Documentation
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 am trying to make a website by watching tutorial in Udemy.
The instructor added Route in one of the file, and I did the same, but my webpage becomes blank after adding it.
I also tried including Routes but that didn't help.
Here's my code:
import { Container } from 'react-bootstrap';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import HomeScreen from './screens/HomeScreen';
function App() {
return (
<Router>
<Header />
<main classname="py-3">
<Container>
<Routes>
<Route path="/" element={<HomeScreen />} />
</Routes>
</Container>
</main>
</Footer />
</Router>
);
}
export default App;
enter image description here
It looks like you may be using react-router-dom#6. The Routes component API changed significantly from v5 to v6, it no longer takes a component, or render or children function props, all replaced by a single element prop taking a ReactNode, a.k.a. JSX. Note that in RRDv6 that all routes are now always exactly matched, so there is also no longer any exact prop.
Example:
<Router>
<Header />
<main classname="py-3">
<Container>
<Routes>
<Route path="/" element={<HomeScreen />} />
</Routes>
</Container>
</main>
</Footer />
</Router>
I have try to call my routes form App.js file but this is not working properly. I have try many times but browser gets the blank screen. Am totally new to react js Framework
App.js:
import React from 'react';
import { BrowserRouter, Route,Routes} from 'react-router-dom';
import Login from './Components/Login/Login';
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" exact={true} component={Login}></Route>
<Route path="/login" exact={true} component={Login}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Login Component here:(Login.js)
import React from "react";
const Login = () => {
return (
<form>
<h3>Sign In</h3>
<div className="form-group">
<label>Email address</label>
<input
type="email"
className="form-control"
placeholder="Enter email"
/>
</div>
</form>
);
};
export default Login;
You should remove <Routes>
in React Router V5 we just have <BrowserRouter> and <Route>
OR also you can do this for importing: BrowserRouter as Router
import React from "react";
import {
BrowserRouter as Router,
Switch
Route,
} from "react-router-dom";
import Login from "./Login";
function App() {
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login}></Route>
<Route path="/login" exact={true} component={Login}></Route>
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
try this code snippet.
Change Routes with Switch Statement.
import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Login from "./Login";
function App() {
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login}></Route>
<Route path="/login" exact={true} component={Login}></Route>
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
After a day of research, I found the solution and it`s nowhere on the internet.
type the following commands in the terminal:
npm uninstall react-router-dom (if you installed that way) Or
npm uninstall react-router-dom#6 (if you installed that way)
Then install react-router-dom#5 by typing
npm install react-router-dom#5
and you would be able to see the components in the browser
Consider the code :
import React from 'react';
import { Link, BrowserRouter } from 'react-router-dom';
import { ReactComponent as Logo } from '../../assets/crown.svg';
import './header.styles.scss';
const Header = () => (
<BrowserRouter>
<div className='header'>
<Link className='logo-container' to='/'>
<Logo className='logo' />
</Link>
<div className='options'>
<Link className='option' to='/shop'>
SHOP
</Link>
<Link className='option' to='/contact'>
CONTACT
</Link>
</div>
</div>
</BrowserRouter>
);
export default Header;
This is a header that I use in my App.
Look like this :
When I click on the crown the URL (in the browser) changes , but the page doesn't change , it stays on the same page.
Same thing happens with the other Links , CONTACT & SHOP.
What's wrong with the <Link> tag ? Why doesn't it forward to the to that's written on the Link tag ?
Did you setup the routes? This would be in AppRouter.js for example:
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path='/' component={Home} exact={true} />
<Route path='/shop' component={Shop} exact={true }/>
<Route path='/contact' component={Contact} exact={true} />
<Route component={ErrorPage} />
</Switch>
</div>
</BrowserRouter>
If you want navigate your user try use NavLink
or add withRouter to component and push them to the other pages
-- NavLink solution :
import { NavLink, BrowserRouter } from 'react-router-dom';
and then in your JSX use this instead
<NavLink className='logo-container' to='/'>
<Logo className='logo' />
</NavLink>
-- push solution:
import { withRouter , BrowserRouter } from 'react-router-dom';
export your component like this
export default withRouter(Header);
then you can use any tags you want and listen at events on them
<p className='logo-container' onClick = {() => props.history.push('/')}>
<Logo className='logo' />
</p>
in order to navigate to different components you have to define routers. So react-router-dom will know what to display.
The other thing is u cannot put BrowserRouter inside the Header component. Component BrowserRouter wraps the history object in the browser and passes it to down to component tree. BrowserRouter is a wrapper. Header should be placed inside the BrowserRouter but not here. just create your Header Component without BrowserRouter.
here is how you should properly implement routing in react.js
in src/omponents folder create your components for routes.
src/component/shop.js:
import React from "react";
const Shop = () => <div>my shop component</div>; //define your component
export default Shop;
create all other components like so including Header but without BrowserRouter. then in src folder create a new directory name routers. inside of it create AppRouter.js
src/routers/AppRouter.js
import { BrowserRouter, Route, Switch } from "react-router-dom";
import React from "react";
import Shop from "../components/Shop";
//import all other routes from components directory.
import Header from "../components/Header"
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={YourHomeComponent} exact={true} />
<Route path="/contact" component={Contact} />
<Route path="/shop" component={Shop} />
<Route component={NotFound} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
// When react-router sees “Switch” it is going to move through your route definitions in order and it’s going to stop when it finds a match.
finally in app.js
import React from "react";
import ReactDOM from "react-dom";
import AppRouter from "./routers/AppRouter";
ReactDOM.render(<AppRouter />, document.getElementById("app"));
I'm starting in React and I'm curious about about if have any way to change a page without reload all the html, changing only a content component for example.
I know that there is a way to change the component without change the url but I thought that if the url change too the application would be better.
React Router is the exact thing you're looking for
Here, how you can achieve what you're looking for.
First, wrap your app with BrowserRouter
import { BrowserRouter } from "react-router-dom";
import React from 'react';
class App extends React.Component {
return (){
return (
<BrowserRouter>
<SomeComponent />
</BrowserRouter>
)
}
}
Now just use the Route and Link. Route told the application which component to render on the basis of the current route and Link changes the URL without reloading the whole page
import { Route, Link, Switch } from "react-router-dom";
import React from 'react';
import {Circle, Square} from './someFileWithComponents';
class SomeComponent extends React.Component {
render(){
return (
<div>
<Link to='/circle' >Circle</Link>
<Link to='/square' >Square</Link>
<Switch>
<Route path='/circle' component={Circle} />
<Route path='/square' component={Square} />
</Switch>
</div>
)
}
}
React Router is what you looking for
const AppRouter =()=>(
<BrowserRouter>
<div>
<Header/>//where Header components contains the navigation
<Switch>
<Route path="/" component={BookListPage} exact={true} />
<Route path="/create" component={AddBookItem} />
<Route path="/edit/:id" component={EditBookItem} />
<Route path="/help" component={HelpPage} />
<Route component={NotFoundPage} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;