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>
)
}
Related
I have downloaded everything and it is not showing or displaying anything on the page. Here is the error that is showing in the inspect
Here is the code
This is App.js
//import logo from './logo.svg';
import './App.css';
import { BrowserRouter , Routes, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
function App() {
return (
<BrowserRouter>
<div>
<header>
VAC
</header>
<main>
<Routes>
<Route path="/" element={<HomeScreen/>}/>
</Routes>
</main>
</div>
</BrowserRouter>
);
}
export default App;
This is HomeScreen.js
import data from '../data';
function HomeScreen() {
return (
<div>
<h1>Features Products </h1>
<div className="products">
{data.products.map((product) => (
<div className="product" key={product.slug}>
<a href={`/product/${product.slug}`}>
<img src={product.image} alt={product.name} />
</a>
<div className="product-info">
<a href={`/product/${product.slug}`}>
<p>{product.name}</p>
</a>
<p>
<strong>${product.price}</strong>
</p>
<button> Add To Cart</button>
</div>
</div>
))}
</div>
</div>
);
}
export default HomeScreen;
where can be the mistake? please help me
Let's try to break your App a bit, so it will be clearer what happens.
Layout that is same for all routes should be provided in toplevel route, not around Routes. Outlet inside Layout component will be replaced with particular route.
For more about Outlet check official documentation, I warmly recommend this tutorial.
import './App.css';
import { BrowserRouter , Routes, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
function Layout() {
return (
<div>
<header>
VAC
</header>
<main>
<Outlet />
</main>
</div>
);
}
function App() {
return (
<Routes>
{/* Here we provide styles through Layout component. */}
<Route path="/" element={<Layout />}>
<Route index element={<HomeScreen />} />
</Route>
</Routes>
);
}
/* It's good idea to separate providers from App. */
function WrappedApp() {
return (
<BrowserRouter>
<App />
</BrowserRouter>
);
}
export default WrappedApp;
If still nothing is displayed, please right click on webpage and in menu choose "inspect page source" and please provide what it shows. Additionaly it would also be useful to see index.ts file.
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import App from "./components/App";
render(
<Router>
<App />
</Router>,
document.getElementById("app")
);
// App.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import HomePage from "./home/HomePage";
import AboutPage from "./about/AboutPage";
import Header from "./common/Header";
import PageNotFound from "./PageNotFound";
function App() {
return (
<div className="container-fluid">
<Header />
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route component={PageNotFound} />
</Switch>
</div>
);
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
This question already has an answer here:
React Route render blank page
(1 answer)
Closed 4 months ago.
I was trying to create simple navbar where onclick will redirect to component but unable to redirect to the page.
Like if I click on dogs it should be redirected to home component i have given component navbar where link to dogs is available.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Navbar.js
import React, { useState } from "react";
import { Link } from "react-router-dom";
import Home from "./Home";
import Select from "./Select";
function Navbar({ props }) {
return (
<div className="navbar">
<li>
<Link to="/">Dogs</Link>
</li>
<li>
<Link to="/cats">Cats</Link>
</li>
<li>
<Link to="/sheeps">Sheeps</Link>
</li>
<li>
<Link to="/goats">Goats</Link>
</li>
</div>
);
}
export default Navbar;
Home.js
import React from "react";
function Home() {
return (
<div>
<h3>Dogs</h3>
<div>
<img src="./dog.png"/>
<img src="./dog.png"/>
</div>
</div>
);
}
export default Home;
App.js
import "./App.css";
import Navbar from "./Components/Navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Components/Home";
import Select from "./Components/Select";
function App() {
return (
<div className="App">
<Router>
<Navbar />
<Routes>
<Route exact path="/" component={<Home />} />
<Route path="/cats" component={<Select />} />
</Routes>
</Router>
</div>
);
}
export default App;
In new versions of react-router-dom you should use "element" instead of "component"
like:
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/cats" element={<Select />} />
</Routes>
Unable to see the header text returned in my Home and Tutorials page in my react hooks site. Below is my App.js, Navigation.js and Home.js. Could someone please advise about the problem here.
App.js
import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import Tutorials from "./components/Tutorials";
import Navigation from './components/Navigation';
function App() {
return (
<BrowserRouter>
<Navigation>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/tutorials" component={Tutorials} />
</Switch>
</Navigation>
</BrowserRouter>
);
};
export default App;
Navigation.js
import React from 'react';
import { NavLink} from 'react-router-dom';
const Navigation = () => {
return (
<div className="App">
<div className="wrapper">
<div id="wrap">
<nav className="siteNavigation_nav_links">
<div className="row" ></div>
<div className="main_links_nav">
<NavLink className="mob_link" to="/">Home</NavLink>
<NavLink className="mob_link" to="/tutorials">Tutorials</NavLink>
</div>
</nav>
</div>
</div>
</div>
)
}
export default Navigation;
Home.js
import React from 'react';
const Home = () =>{
return (
<div className="App">
<h1>This is Home Page !</h1>
</div>
)
}
export default Home;
Tutorials.js
import React from 'react';
const Tutorials = () =>{
return (
<div><h1>This is Tutorials Page !</h1></div>
)
};
export default Tutorials;
Navigation is a Navbar component. And you want it everywhere on the site.
So, you can easily do it by using it outside the scope of the Switch component.
In doing so, it will render all over your screens.
<BrowserRouter>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/tutorials" component={Tutorials} />
</Switch>
</BrowserRouter>
I have an website with this structure:
<Header>
<MenuPrincipal>
<Home></Home>
</MenuPrincipal>
</Header>
When I click on a logo in the Header, it isn't working, nothing is happening and I would like to access the Home component The <Home> component is inside of <MenuPrincipal>. The <Header> component is the parent component, how you can see in the structure above. How can I solve it?
import React from 'react'
import { BrowserRouter as Router, Route, Link, } from 'react-router-dom'
import Home from './Home';
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import { showBGImage } from './actions';
const Header = (props) => {
return (
<div className="header">
<div>
<Router>
<div>
<h1>
<Link onClick={showBGImage} className="home-link" to='/'>Mauro Bitar<br />
<small className="home-link">arquiteto</small>
</Link>
</h1>
<Route exact path='/' render={() => <Home />} />
</div>
</Router>
</div>
</div>
)
}
export default Header
<BrowserRouter> it's more like a history browser, you need to use Switch instead.
import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom'
const Header = (props) => {
return (
<div className="header">
<Router>
<Switch>
<div>
<h1>
<Link onClick={showBGImage} className="home-link" to='/'>Mauro Bitar<br />
<small className="home-link">arquiteto</small>
</Link>
</h1>
<Route exact path='/' render={() => <Home />} />
</div>
</Switch>
</Router>
</div>
)
}
This is the routes.js where all the routes are managed.
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import App from './App';
import Home from './components/home/home';
import Products from './components/products/products';
import AboutUs from './components/aboutUs/aboutUs';
import Careers from './components/careers/careers';
const Routes = () => (
<Router>
<App>
<Route exact path="/" component={Home} />
<Route path="/products" component={Products} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/careers" component={Careers} />
</App>
</Router>
);
export default Routes;
App.js
import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import AppHeader from './components/appHeader/appHeader';
import AppFooter from './components/appFooter/appFooter';
class App extends Component {
render() {
return (
<div className="home">
<AppHeader/>
<div>{this.props.children}</div>
<AppFooter/>
</div>
);
}
}
export default App;
And inside my AppHeader i am using Link to redirect
<div className="nav-module menu-module">
<ul className="menu">
<li>
<Link to="/" className={this.getCurrentPath() == 'home' ? "current":""}>Home</Link>
</li>
<li>
<Link to="/products" className={this.getCurrentPath() == 'products' ? "current":""}>Products</Link>
</li>
<li>
<Link to="/aboutus" className={this.getCurrentPath() == 'aboutus' ? "current":""}>About Us</Link>
</li>
<li>
<Link to="/careers" className={this.getCurrentPath() == 'careers' ? "current":""}>Careers</Link>
</li>
</ul>
</div>
I have no clue why the application refreshes even after using <Link> from react-router-dom. Could version of react-router-dom be an issue or anything else i am missing.
Any help is appreciated .