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>
Related
This question already has answers here:
How do I render components with different layouts/elements using react-router-dom v6
(2 answers)
Closed 8 months ago.
I have a React application with React Router Dom v6 and trying to render the Nav component when the path does NOT match the root "/" but I'm having trouble getting it to work. This is my code:
import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Home from "./components/Home/Home";
import Contributors from "./components/Contributors/Contributors";
const App = () => {
const match = matchPath({ path: "/", end: true }, "/");
return (
<Router>
{!match ? <Nav /> : null}
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/contributors" element={<Contributors />} />
</Routes>
</Router>
);
}
export default App;
How should I fix this?
Quick Solution:
You could simply do like below, adding the Nav where you want. I'm not sure if you can know the path in App, since it's not wrapped inside the Router.
import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Home from "./components/Home/Home";
import Contributors from "./components/Contributors/Contributors";
const App = () => {
return (
<Router>
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/contributors" element={<><Nav /><Contributors /></>} />
</Routes>
</Router>
);
}
export default App;
Improvement:
And if you want to take it further, instead of doing like above, you could set up a Layout component, like this:
import { Outlet } from "react-router-dom";
import Nav from "../Nav/Nav";
const Layout () => {
return (
<>
<Nav />
<Outlet />
</>
);
};
export default Layout;
And render the routes where you want the Nav trough the Layout:
import { BrowserRouter as Router, Routes, Route, matchPath } from "react-router-dom";
import Home from "./components/Home/Home";
import Contributors from "./components/Contributors/Contributors";
import Layout from "./components/Layout/Layout";
const App = () => {
return (
<Router>
<Routes>
<Route path="/" exact element={<Home />} />
<Route element={<Layout />}>
<Route path="/contributors" element={<Contributors />} />
</Route>
</Routes>
</Router>
);
}
export default App;
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;
import Navbar from "./components/Navbar.js"
import Footer from "./components/Footer.js"
import './index.css'
import HomePage from "./pages/HomePage/HomePage.js";
import {
Routes,
Route,
} from "react-router-dom";
import ProductPage from "./pages/ProductPage.js";
import CreateProduct from './pages/admin/CreateProduct'
function App() {
return (
<div className="App">
<>
<Navbar/>
<Routes>
<Route exact path="/" element={<HomePage/>} />
<Route exact path="/product/:id" element={<ProductPage />}/>
</Routes>
<Footer/>
<Routes>
<Route exact path="sarangAdmin/create-product" element={<CreateProduct/>} />
</Routes>
</>
</div>
);
}
export default App;
As you can see in the route of sarangAdmin i dont want the default navbar and fotter appear i want to create a new one for the admin the problem is then when i going on this route i am seeing navbar nad footer but not my create componenet what i want is that i should not see the navbar and footer component and see my create-product componenet
I think it's better that you change Footer & Navbar component
at first add location to app params app({ location })
then
{location.pathname!=='sarangAdmin/create-product'?<Footer/>}
I hope this code will help you
import Navbar from "./components/Navbar.js"
import Footer from "./components/Footer.js"
import './index.css'
import HomePage from "./pages/HomePage/HomePage.js";
import {Routes,Route} from "react-router-dom";
import ProductPage from "./pages/ProductPage.js";
import CreateProduct from './pages/admin/CreateProduct'
const App = ({location}) => {
return (
<div className="App">
{location.pathname!=='sarangAdmin/create-product'?<Navbar/>:null}
<Routes>
<Route exact path="/" element={<HomePage/>} />
<Route exact path="/product/:id" element={<ProductPage />}/>
<Route exact path="sarangAdmin/create-product" element={<CreateProduct/>} />
</Routes>
{location.pathname!=='sarangAdmin/create-product'?<Footer/>:null}
</div>
);
};
export default App;
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 />} />
I'm having problems trying to make a simple setup to run. I have used "react-router-dom" because it claims to be the most documented router around.
Unfortunately, the documentation samples are using functions instead of classes and I think a running sample will not explain how routes have changed from previous versions... you need a good sight!. Btw, there are a lot of breaking changes between versions.
I want the following component structure:
Home
Login
Register
Recipes
Ingredients
Have the following components:
index.js (works fine)
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import App from './App';
ReactDOM.render((
<BrowserRouter>
<Route component={App}/>
</BrowserRouter>
), document.getElementById('root'));
App.js (fine)
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home'
import Recipes from './recipes/Recipes'
import Ingredients from './ingredients/Ingredients'
class App extends React.Component {
render() {
return (
<div id="App">
<Switch>
<Route exact path='/home' component={Home} />
<Route path='/recipes' component={Recipes} />
<Route path='/ingredients' component={Ingredients} />
<Route render={() => <h1>Not found!</h1>} />
</Switch>
</div>
);
}
}
export default YanuqApp;
Ingredients and Recipes components working fine, so I'll skip from here
Home.js - The problem starts here. Home itself loads correctly, but once Login or Register links are clicked, it shows "Not found!" (fallback route in App.js)
import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Register from './account/register'
import Login from './account/login'
class Home extends React.Component {
render() {
return (
<div>
<div>
This is the home page...<br/>
<Link to='/home/login'>Login</Link><br />
<Link to='/home/register'>Register</Link><br />
</div>
<Switch>
<Route path='/home/login' component={Login} />
<Route path='/home/register' component={Register} />
</Switch>
</div>
);
}
}
export default Home;
Login and register are very similar:
import React from 'react';
class Login extends React.Component {
render() {
alert("login");
return (
<div>Login goes here...</div>
);
}
}
export default Login;
And cannot figure why Login and Register are not found. I have tried also defining routes as:
<Link to={`${match.path}/register`}>Register</Link>
...
<Route path={`${match.path}/register`} component={Register} />
(don't see the gain on using match, as it renders as the expected "/home/register"), but the problem persists in identical way
I think it's because of the exact flag on the Route for home. It does not match the /home exact so it goes to the default not found page.
try to add this in App.js
<Switch>
<Route exact path='/' component={Home} />
<Route path='/recipes' component={Recipes} />
<Route path='/ingredients' component={Ingredients} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<Route render={() => <h1>Not found!</h1>} />
</Switch>
to this is work
<Link to={`${match.path}/register`}>Register</Link>
...
<Route path={`${match.path}/register`} component={Register} />
you should provide match as the props because cont access directly to the match to used it you should provide a match as this following
const namepage=({match})=>{
<Link to={`${match.path}/register`}>Register</Link>
...
<Route path={`${match.path}/register`} component={Register} />
})