This question already has answers here:
Link tag inside BrowserRouter changes only the URL, but doesn't render the component
(2 answers)
Closed 10 months ago.
I have been trying to route to different pages in my react site but for some reason the whole page goes blank as soon as I add any routing. I am using npm and react bootstrap
Here is my code, I am trying to route to simple pages like Home.
App.js
import Artists from './Artists';
import Home from './Home';
import Music from './Music';
import Navigation from "./Navigation.js";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Footer from './footer'
function App() {
return (
<div className="App">
<Router>
<Navigation></Navigation>
<Route exact path="/" component={Home}></Route>
<Route path="/artists" component={Artists}></Route>
<Route exact path="/music" component={Music}></Route>
</Router>
<Footer/>
</div>
);
}
export default App;
Navigation.js
import React from "react";
import { Button, Navbar, Container} from 'react-bootstrap'
import { Link, Router, Route } from "react-router-dom";
import Nav from "react-bootstrap/Nav";
import { LinkContainer } from "react-router-bootstrap";
import Artists from './Artists'
import Home from './Home'
const Navigation = () => {
return (
<Navbar bg="light" variant="light">
<Navbar.Brand>
<img src={require('.//Nothing Iconic Reccords.png')} width="135"
height="135"/>
</Navbar.Brand>
<Nav className="nav-link">
<LinkContainer to="/">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/artists">
<Nav.Link>Artists</Nav.Link>
</LinkContainer>
<LinkContainer to="/music">
<Nav.Link>Music</Nav.Link>
</LinkContainer>
</Nav>
</Navbar>
);
};
export default Navigation;
Try using routes, put route in routes and add props element in route:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/artists" element={<Artists />} />
<Route path="/music" element={<Music />} />
</Routes>
</Router>
For react router 5 or below
You're missing an important wrapper called <Switch> that wraps around your routes (<Route> elements), in your App.js file. Here's the quickstart guide describing the structure.
<Router>
<Switch>
<Route path="/about">
<About />
</Route>
</Switch>
</Router>
Without this wrapper (or similar ones as described in the documentation) , react router doesn't know what matching logic you want to apply, so it can't render a specific page/route.
If you are using React router 6 (most recent version), the entire syntax needs to be re-written.
For React router 6 (most recent version)
The you have to order your routes like so:
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}/>
</Routes>
</BrowserRouter>
This is link goes more in-depth about this
You need to carefully read the react-router-dom documentation. According to the documentation,
If you're using the latest version of react-router-dom i.e. #6.3.0, you must use { Routes } instead of { Switch }. Otherwise, you're good to go with { Switch } for older versions of react-router-dom.
You must import { BrowserRouter as Router, Switch, Route } from "react-router-dom" in your App.js file.
You only need to wrap your respective routes inside the Router element and leave everyother component outside of element i.e. component.
You need to write your components in the form of HTML elements inside tag.
Your App.js file should look as same as the one below:
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Artists from './Artists';
import Home from './Home';
import Music from './Music';
import Navigation from "./Navigation.js";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import Footer from './footer'
export default function App() {
return (
<Router>
<div>
<Navigation/>
<Switch>
<Route exact path="/" component={<Home />} />
<Route path="/artists" component={<Artists />} />
<Route exact path="/music" component={<Music />} />
</Switch>
</div>
</Router>
);
}
export default App
If you want to get a specific component on some action e.g. onClick, like inside a navigation component, you only need to import { LinkContainer } or { Link } from "react-router-dom", because Link and LinkContainer, both behave the same way. So you don't need to import both of them at a time in a single file. Importing Router and Route make no sense in the Navigation.js file. Since you are not making any use of the Artist and Home components inside the Navigation.js file, you are not required to import them into Navigation.js.
Your Navigation.js file should look as same as the one below:
import { link } from "react-router-dom"
import React from "react";
import { Button, Navbar, Container} from 'react-bootstrap'
import Nav from "react-bootstrap/Nav";
const Navigation = () => {
return (
<Navbar bg="light" variant="light">
<Navbar.Brand>
<img src={require('.//Nothing Iconic Reccords.png')} width="135"
height="135"/>
</Navbar.Brand>
<Nav className="nav-link">
<LinkContainer to="/">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/artists">
<Nav.Link>Artists</Nav.Link>
</LinkContainer>
<LinkContainer to="/music">
<Nav.Link>Music</Nav.Link>
</LinkContainer>
</Nav>
</Navbar>
);
};
export default Navigation;
Related
This question already has answers here:
React App goes blank after importing React-Router-Dom
(3 answers)
Closed 2 months ago.
I'm trying to use BrowserRouter to make a fixed NavBar with page content changing when you go in another page.
This is my App.js:
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import React from 'react';
import Homepage from './components/Homepage/Homepage';
import Dashboard from './components/Dashboard/Dashboard';
import Preferences from './components/Preferences/Preferences';
import { Navbar, NavLink, NavMenu, NavTitle } from './components/Nav/Navbar';
function App() {
return (
<div>
<BrowserRouter>
<Navbar>
<NavMenu>
<NavTitle>Application</NavTitle>
<NavLink to={'/dashboard'}>
Dashboard
</NavLink>
<NavLink to={'/preferences'}>
Preferences
</NavLink>
</NavMenu>
</Navbar>
<div>
<Routes>
<Route path='/' exact element={Homepage} />
<Route path='/dashboard' element={Dashboard} />
<Route path='/preferences' element={Preferences} />
</Routes>
</div>
</BrowserRouter>
</div>
);
}
export default App;
This is Dashboard.js:
import React from 'react';
export default class Dashboard extends React.Component {
constructor() {
super();
console.log("Dashboard")
};
render() {
return(
<h2>Dashboard</h2>
)
};
}
The others page component are the same as this one.
The NavBar is shown, but not the content when I change path.
I tried to search online but seems nobody had my problem, so I'm wrong something.
use Switch instead of routers
<Switch>
<Route path='/' exact element={Homepage} />
<Route path='/dashboard' element={Dashboard} />
<Route path='/preferences' element={Preferences} />
</Switch>
in Switch Route Routing time it's working, but now latest new Routes, Route it not working custom route
I have wrapped the navbar page and home page in HomeLayoutHOC
can anyone help me :) how to do this latest version I try but so many things. no result for this
I want 'HomeLayoutHOC " route instead of "Route"
->client\src\App.JSX :
//HOC
import HomeLayoutHOC from "./HOC/Home.Hoc";
import { Route, Routes } from "react-router-dom";
//Component
import Temp from "./Components/temp";
function App() {
return (
<>
<Routes>
<HomeLayoutHOC path="/" exact element={Temp} /> // <--- I want this to work!
// <Route path="/" element={<Temp />} /> // <-- this working fine
</Routes>
</>
);
}
export default App;
result 👇
screenshot!
->client\src\index.jsx :
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.CSS";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
-> client\src\HOC\Home.Hoc.jsx
import React from "react";
import { Route } from "react-router-dom";
// Layout
import HomeLayout from "../Layout/Home.Layout";
const HomeLayoutHOC = ({ component: Component, ...rest }) => {
return (
<>
<Route
{...rest}
component={(props) => (
<HomeLayout>
<Component {...props} />
</HomeLayout>
)}
/>
</>
);
};
export default HomeLayoutHOC;
->client\src\Layout\Home.Layout.jsx
import React from "react";
// Components
import Navbar from "../Components/Navbar";
const HomeLayout = (props) => {
return (
<>
<Navbar />
<div className="container mx-auto px-4 lg:px-20 ">{props.children}</div>
</>
);
};
export default HomeLayout;
please give me the possible suggestion for the latest router dom (Routes, Route)
wrapping/composing
How can I spread routeProps to make them available to your rendered Component the latest router dom (Routes, Route)
react-router-dom#6 removed the need, and compatibility, for custom route components. It's an invariant violation to render anything other than a Route or React.Fragment component in the Routes component. Custom route components are replaced with the use of either wrapper components on individual routes wrapping the element being rendered, or by layout route components that can wrap any number of nested Route components.
Wrapper components render the children prop
<Route
path="/"
element={(
<Wrapper>
<Componenet />
</Wrapper>
)}
>
Layout Route components render an Outlet component for nested routes to render their element prop into.
<Route element={<Layout />}>
<Route path="/" element={<Componenet />} />
</Route>
You are asking for the Layout Route version since it seems you want to render the Navbar component as part of a greater layout.
HomeLayout
import React from "react";
import { Outlet } from "react-router-dom";
import Navbar from "../Components/Navbar";
const HomeLayout = () => {
return (
<>
<Navbar />
<div className="container mx-auto px-4 lg:px-20 ">
<Outlet />
</div>
</>
);
};
export default HomeLayout;
App
Render HomeLayout on a pathless route as a Layout Route. The nested Route components render their content into the outlet.
import { Route, Routes } from "react-router-dom";
import HomeLayout from "./path/to/HomeLayout";
import Temp from "./Components/temp";
function App() {
return (
<Routes>
<Route element={<HomeLayout />}>
<Route path="/" element={<Temp />} />
... other routes to render with Home layout and Navbar ...
</Route>
... other routes to render without Home layout and Navbar ...
</Routes>
);
}
An important aspect you should notice here is that RRDv6 removed route props, all the old "props" are now only accessible via React hooks in the routed component, i.e. useNavigate, useLocation, useParams, etc. If you are still using React class-based components they won't be able to use React hooks, and since RRDv6 also no longer exports the withRouter Higher Order Component, well, you will need to roll your own. See What happened to withRouter? I need it! for details.
So i was trying react for first time, i followed the documentation and at router dom i got stuck
When i use Switch is says "export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'" So in short my router isn't working and i want a way to make it work, also it is the latest version of react as i just made this project yesterday
import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import Form from './components/Form';
import Sus from './components/Sus';
import React from "react";
import {
BrowserRouter as Router,
// Switch,
Routes,
Route,
Link
} from "react-router-dom";
function App() {
return (
<Router>
<div className="">
<Navbar title="Sus" main="SusHome" about="SusAbout"/>
<div className="container my-5">
<Routes>
<Route path="/" component={Form}/>
<Route path="/sus" component={Sus} />
</Routes>
</div>
</div>
</Router>
);
}
export default App;
To render your components you have to pass like this:
<Route path="/" element={<Form/>}/>
<Route path="/sus" element={<Sus/>} />
The documentation react-router-dom version 6 is this.
Upgrading React Router V5 to V6
If you have ever used React Router you know that we need to wrap our routes into this <Switch> component that makes sure that only one of these routes is loaded at the same time, instead of all matching routes. Something like this
export function App() {
return (
<div>
<Switch>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
)
}
Now with V6 we changed the name from Switch to Routes and now the Routes component has a new prop called element, where you pass the component it needs to render inside this component and be like this
export function App() {
return (
<div>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
)
}
I am trying to learn MERN mainly react by following a tutorial (https://www.youtube.com/watch?v=7CqJlxBYj-M) and I have followed the code exactly but when I run the server and open the web page it is blank.
I know the problem is with the four React route paths because if I remove them the web page displays the navbar. I also get no errors when running the server.
this is the app.js file code:
import React from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route,} from "react-router-dom";
import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";
function App() {
return (
<Router>
<div className="container">
<Navbar />
<br/>
<Route path="/" exact component={ExercisesList} />
<Route path="/edit/:id" component={EditExercise} />
<Route path="/create" component={CreateExercise} />
<Route path="/user" component={CreateUser} />
</div>
</Router>
);
}
export default App;
This is the code for create-exercise:
import React, { Component } from 'react';
export default class CreateExercise extends Component{
render() {
return (
<div>
<p>You are on the create exercises List componentt</p>
</div>
)
}
}
The other three have the same code.
This is the link to the github containing the tutorial's code:
https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa3VfM2thaXc4b1RoODUxWkh0MXprN2NFV3E2QXxBQ3Jtc0trbTdTQll1WmVFQ1hRb0ZOVWlUVVROUG1ta2RranJocVFmektvb0F0VWpKQjNWY0tIelBuZ1ZLNDU5VVFhSVZiS3VGTnJHT19ja0NYdVI3OFdkZVVQS0ZoLV8wQkxhT2xqeS0yakNPSXNyZjlLTW5Vbw&q=https%3A%2F%2Fgithub.com%2Fbeaucarnes%2Fmern-exercise-tracker-mongodb
In React-Router version 6 you need to use element
https://reactrouter.com/docs/en/v6/getting-started/tutorial#add-some-routes
Example:
<Route path="/" element={<App />} />
<Route path="expenses" element={<Expenses />} />
<Route path="invoices" element={<Invoices />} />
As the title, I need some help with my code. I want to remove: Navbar and SimpleButtons from /Login and /CreatePage but not the rest of the pages listed. this is my App.jsx:
Hi guys. As the title, I need some help with my code. I want to remove: Navbar and SimpleButtons from /Login and /CreatePage but not the rest of the pages listed. this is my App.jsx:
import React, { useState } from 'react'
import logo from './logo.svg'
import Footer from './components/Footer'
//Import Libraries
import { BrowserRouter as Router, Route, Switch, } from "react-router-dom";
import Navbar from './components/Navbar'
//Import CSS
import './App.css'
//Import Components
import SimpleButtons from './components/Buttons'
//Import Pages
import ChatPage from './pages/ChatPage';
import ActivityPage from './pages/ActivityPage';
import SearchPage from './pages/SearchPage';
import LoginPage from './pages/LoginPage';
import CreatePage from './pages/CreateAccountPage';
import Upload from './pages/UploadPage';
function App() {
return (
<div className="App">
<Router>
<Navbar/>
<SimpleButtons/>
<Switch>
<Route exact path="/" component={SearchPage}/>
<Route exact path="/Login" component={LoginPage}/>
<Route exact path="/SearchPage" component={SearchPage} />
<Route exact path="/CreatePage" component={CreatePage} />
<Route exact path="/Chat" component={ChatPage} />
<Route exact path="/Activity" component={ActivityPage} />
<Route exact path="/UploadPage" component={Upload} />
</Switch>
<Footer/>
</Router>
</div>
)
}
export default App
On your app you can add an statement check, something like:
{ route === "/Login" || route === "/CreatePage" ? null : (<Navbar/>
<SimpleButtons/>)}