import {BrowserRouter , Route} from 'react-router-dom';
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
return (
<BrowserRouter>
<div className="grid-container">
<header className="row">
<div>
<a className="brand" href="index.html">SanaMall.</a>
</div>
<div>
<a className="link" href="/cart"> Cart</a>
<a className="link" href="/signin"> Sign In</a>
</div>
</header>
<main>
<Route path= "/" component={HomeScreen}/>
<Route path="/product/:id" component={ProductScreen}/>
</main>
<footer className="row center">
All rights reserved.
</footer>
</div>
</BrowserRouter>
);
}
export default App;
So my problem is that when i put exact path on the component HomeScreen, it doesnt render anything and then the ProductScreen only appears on the browser. Then if the HomeScreen shows in the brower, whenever i clicked on a product, it only refreshes the HomeScreen and it doesn't show the ProductScreen.
Hope you guys could help me. This have been my problem for almost 3 days.
If this code can't work let me know
import {BrowserRouter ,Switch, Route} from 'react-router-dom';
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
return (
<BrowserRouter>
<div className="grid-container">
<header className="row">
<div>
<a className="brand" href="index.html">SanaMall.</a>
</div>
<div>
<a className="link" href="/cart"> Cart</a>
<a className="link" href="/signin"> Sign In</a>
</div>
</header>
<Switch>
<Route exact path="/" >
<HomeScreen />
</Route>
<Route path="/product/:id">
<ProductScreen />
</Route>
</Switch>
<footer className="row center">
All rights reserved.
</footer>
</div>
</BrowserRouter>
);
}
export default App;
Use Switch to exclusively render each route https://reactrouter.com/core/api/Switch
Related
This is my first reactjs application and I have an issue with the navigation. When I try to navigate via url .../posts or ../home only the main App page is showing up. How can I fix this? Thank you in advance!
I have App main page where user can Login or Register:
import React,{useState, useEffect} from 'react';
import {Register} from './subcomponents/Register';
import {Login} from './subcomponents/Login';
export function App() {
return (
<div className="root">
<Login />
<p>Hi {name}</p>
<Register/>
</div>
);
}
Home page, when the user is logged in to be redirected:
import React from 'react';
import { Posts } from './Posts';
import {Home} from './Home.jsx';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import {Nav} from './Nav';
export function Home(){
return(
<div id="home">
<BrowserRouter>
<Nav/>
<Routes>
<Route path='/home' element={<Home/>}/>
<Route path="/posts" element={<Posts/>}/>
</Routes>
</BrowserRouter>
<h3>This is the home page</h3>
</div>
)
}
Nav component:
import React from 'react';
import {Link} from 'react-router-dom'
import '../css/nav.css';
import Logo from '../images/Logo.png';
export function Nav(){
return(
<div id="nav">
<img src={Logo} className="nav-logo" alt="logo"/>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/posts">Posts</Link>
</li>
</ul>
</div>
)
}
for access to components in the project by url,it need be to render before.
export function App(){
return(
<BrowserRouter>
<div id="app">
<Routes>
<Route path='/home' element={<Home/>}/>
<Route path="/posts" element={<Posts/>}/>
</Routes>
</div>
</BrowserRouter>
)
}
I'm learning reactjs front-end at the moment. But I am stuck that the Routes is not working.
I'm using ReactJS version 18.0.0
My App.js:
import logo from './logo.svg';
import './App.css';
import { Home } from './Home';
import { BrowserRouter, Route, Routes, NavLink } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="App container">
<h3 className="d-flex justify-content-center m-3">
React JS Frontend
</h3>
<nav className="navbar navbar-expand-sm bg-light navbar-dark">
<ul className="navbar-nav">
<li className="nav-item- m-1">
<NavLink className="btn btn-light btn-outline-primary" to="/home">
Home
</NavLink>
</li>
</ul>
</nav>
<Routes>
<Route path='/home' component={Home} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
Then my Home.js:
import React,{Component} from 'react';
export class Home extends Component{
render(){
return(
<div>
<h3>This is Home page</h3>
</div>
)
}
}
Need advice please.
Thank you.
You seem to be confusing the component prop for your Route with an older version of react-router.
Change it to element like this:
<Routes>
<Route path='/home' element={Home} />
</Routes>
Good morning community StackOverflow.I had to use the route to access some component inside the application but that's not work for me despite I had installed the "npm install react-router-dom" the browser render me a blank file,so this is all my file :
app.js file :
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="grid-container" >
<header className="row" >
<div>
<a className="brand" href="/">My Shop</a>
</div>
<div>
Cart
Sign In
</div>
</header >
<main>
<Route path="/" component={HomeScreen} ></Route>
<Route path="/product/:id" component={ProductScreen} ></Route>
</main>
<footer classNameName="row center" >All right reserved</footer>
</div>
</BrowserRouter>
);
}
export default App;
this is the HomeScreen file :
import React from "react";
import {data} from '../data';
import Product from '../components/Product';
function HomeScreen () {
return (
<div>
<div className="row center">
{data.products.map((product) => (
<Product key={product._id} product={product} ></Product>
))}
</div>
</div>
)
};
export default HomeScreen;
this is the ProductScreen file :
import React from "react";
function ProductScreen () {
return (
<div>Product Screen</div>
)
};
export default ProductScreen;
this is the Product file code:
import React from 'react';
import Rating from './Rating';
function Product (props) {
const {product} = props;
return (
<div className="card">
<a href="product.html">
<img className="medium" src={product.image} alt={product.name} />
</a>
<div className="card-body">
<a href="product.html">
<h2>{product.name}</h2>
</a>
<Rating rating={product.rating} numReviews={product.numReviews} ></Rating>
<div className="price" >${product.price}</div>
</div>
</div>
)
}
export default Product;
In react router v6, lots of keywords have changed. In addition, various functions like useHistory have also been changed. Check the package version in package.json file. You can also check your browser console for errors.
In case you have v6 or above, change your app.js as below, to make it work. I have changed the react router keywords, indented code and made Route tag as self closing.
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div className="grid-container" >
<header className="row" >
<div>
<a className="brand" href="/">My Shop</a>
</div>
<div>
Cart
Sign In
</div>
</header>
<main>
<Routes>
<Route path="/" element={<HomeScreen />} />
<Route path="/product/:id" element={<ProductScreen />} />
</Routes>
</main>
<footer classNameName="row center" >All right reserved</footer>
</div>
</Router>
);
}
export default App;
If you're using version 6, you have to wrap <Route> components with <Routes> (you should import the component first), otherwise, wrap them with <Switch> component
Considering this React function:
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom'
import HomeScreen from './Screens/HomeScreen'
import './App.css';
import currentStrings from './utils/currentlang'
function App() {
const currentlang = currentStrings;
const switchLanguage = () =>{
console.log("switching...");
currentlang.switchLang();
}
return (
<BrowserRouter>
<div className="grid-container">
<header className="header">
<div className="brand">
<Link to="/" >
</Link>
</div>
<div className="header-side">
{currentlang.getCurrent.subtitle}
</div>
<div className="header-right">
<button onClick={switchLanguage}> {currentlang.getCurrent.traduction} </button>
</div>
<div>
</div>
</header>
<main className="main">
<div className="content">
<Route path="/" exact={true} component={HomeScreen} />
</div>
</main>
<footer className="footer">
© 2020
</footer>
</div>
</BrowserRouter>
);
}
export default App;
i want to switch the language when i click on the button, the function itself changes a variable that contains the list of html text. However, all the research has given me solutions by using classes to change the state of my page, but my project is functional and doesn't work in my context.
Here is the 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 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="/" component={ExercisesList} />
<Route path="/edit/:id" component={EditExercise} />
<Route path="/create" component={CreateExercise} />
<Route path="/create" component={CreateUser} />
</div>
</Router>
);
}
export default App;
here is Navbar component code:
import React, { Component } from "react";
import { Link } from "react-router-dom";
export default class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-dark bg-dark never-expend-lg ">
<Link to="/" className="navbar-brand">
ExeriseTracker
</Link>
<div className="collpase navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="navbar-item">
<Link to="/" className="nav-link">
Exercises
</Link>
</li>
<li className="navbar-item">
<Link to="/create" className="nav-link">
Create Exercise Log
</Link>
</li>
<li className="navbar-iteam">
<Link to="/user" className="nav-link">
Create User
</Link>
</li>
</ul>
</div>
</nav>
);
}
}
this a react app which has other component other then nav bar but the react routing is not working, Can any one help on this?
Also i have used some basic bootstrap code just for testing.
the result are here where im clicking one thing and it coming up with 3 statements from other 3 pages in this same page.
enter image description here
In app.js, import Switch from react-router-dom and wrap your routes in Switch:
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
...
<Switch>
<Route path="/" component={ExercisesList} />
<Route path="/edit/:id" component={EditExercise} />
<Route path="/create" component={CreateExercise} />
<Route path="/create" component={CreateUser} />
</Switch>