I am building an app that has 4 main pages and inside each, I have various components.
Pages
Home
Dashboard
Components
Home > (Services,About,Login)
Dashboard(Profile,ListUsers,SearchTweets ,etc etc...)
Problems:
So home page components and its routing is perfectly fine.
The problem lies on the dashboard page. if I click on the profile component in the dashboard navbar on left side do not load component on right.Besides it redirect me to profile empty page(Images is attached)
[[1]][1]
Code for dashboard
import React from 'react'
import { Route } from "react-router-dom"
import "./dashboard-style.css"
// protected for only authenticated or logged in users
import NavDashboard from "../components/Navigation/dashboard-nav"
import Profile from "../components/Profile/profile"
function Dashboard() {
return (
<div className="outer-dash-container">
<div className="left-dash-nav">
<NavDashboard />
</div>
<div className="right-dash-panel">
<h1>I want to show my componets here </h1>
<Route exact path="/profile" component={Profile} />
</div>
</div>
)
}
export default Dashboard
Dashboard Navbar Code
import React from 'react'
import { Link, Route } from "react-router-dom"
import "./navbar-style.css"
function NavDashboard() {
return (
<>
<div className="nav-dash-left">
<div className="logo">
{/* <h1><b className="text-format">Tox</b><i>D</i>etector</h1> */}
</div>
<ul>
<li className="nav-link nav-link-dash"><Link to="/profile" className="nav-link"> Profile</Link></li>
<li className="nav-link nav-link-dash"><Link to="/block" ></Link>
List User
</li>
<li className="nav-link nav-link-dash">Search Tweet</li>
<li className="nav-link nav-link-dash">Check Stat</li>
<li className="nav-link nav-link-dash"> Search By Cities</li>
</ul>
</div>
</>
)
}
export default NavDashboard
This is my app routing
import './App.css';
import Register from "../src/components/User_Manage/register"
import { Route, Redirect } from "react-router-dom"
import Login from './components/User_Manage/login';
import Home from './pages/Home'
import Dashboard from "./pages/Dashboard"
function App() {
return (
<>
<Route exact path="/" component={Home} />
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Route exact path="/dashboard" component={Dashboard} />
</>
);
}
export default App;
remove exact from the place in which you are nested routing it will work fine.
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>
)
}
when i use link on my navbar component it changes the url but does not change the component, but it changes component when i reload,when i put link in main app.js it routes perfectly
app.js
import './App.css';
import Navbar from './Navbar/Navbar'
import About from './About/About'
import { Route, Link, BrowserRouter as Router ,Switch} from 'react-router-dom'
function App() {
return (
<div>
<Navbar/>
<Router>
<Link to="/about">about</Link>
<Switch>
<Route exact path="/about">
<About/>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
navbar.js
import React from 'react'
import './Navbar.css'
import { Link, Router, BrowserRouter} from 'react-router-dom';
function Navbar() {
return (
<div>
<nav className="navbar">
<div>
<h1 className="nav_text">ExportGrains</h1>
</div>
<ul className="nav_ul">
<BrowserRouter>
<Link to="/about">about</Link>
<li id="nav_li">HOME</li>
<li id="nav_li">PRODUCTS</li>
<li id="nav_li">ABOUT</li>
<li id="nav_li">CONTACT</li>
</BrowserRouter>
</ul>
</nav>
</div>
)
}
export default Navbar
about.js
import React from 'react'
function About() {
return (
<div>
<h1>about page</h1>
</div>
)
}
export default About;
it would be very kind if you can help me with it
It should be
import About from "...."
....
....
<Route path="/about" exact component={About} />
You should use one single Router for all your routes. The problem is that navbar is using different router and your other components are inside another router. So remove the router inside navbar and use single router inside your app component.
Also you can add Navbar as default route and put it at the end of the switch so that it matches when none of the above routes are matching.
function App() {
return (
<Router>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Navbar />
</Route>
</Switch>
</Router>
);
}
Switch renders the first child <Route> or <Redirect> that matches the
location.
function Navbar() {
return (
<div>
<nav className="navbar">
<div>
<h1 className="nav_text">ExportGrains</h1>
</div>
<ul className="nav_ul">
<Link to="/about">about</Link>
<li id="nav_li">HOME</li>
<li id="nav_li">PRODUCTS</li>
<li id="nav_li">ABOUT</li>
<li id="nav_li">CONTACT</li>
</ul>
</nav>
</div>
);
}
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>
new to React Router, my question is how to render a particular component inside other layout which is already rendered (i have two components sidebar and content i just want if i click on any link in sidebar that component will we render in already render Content component not override that)
////////////Sidebar.js////////////
import React from 'react'
import { BrowserRouter, Link } from 'react-router-dom'
import PersonalImg from '../images/personal.gif'
const Sidebar = () => {
return (
<div className="sidebar">
<BrowserRouter>
<div className="personal-img">
<img src={PersonalImg} alt="personl-img" />
</div>
<div className="navigation">
<ul className="list">
<li><Link to="/about">About</Link></li>
<li><Link to="/work">Work</Link></li>
<li><Link to="/skills">Skills</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</div>
</BrowserRouter>
</div>
)
}
export default Sidebar;
Content component...
/////////////////Content.js//////////////////
import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import About from './About'
import Skills from './Skills'
import Work from './Work'
import Contact from './Contact'
const Content = (props) => {
return (
<div className="content">
<BrowserRouter>
<Route path="/" componet={About} />
<Route path="/work" componet={Work} />
<Route path="/contact" componet={Contact} />
<Route path="/skills" componet={Skills} />
</BrowserRouter>
</div>
)
}
export default Content;
and thats how App.js rendering these components
render() {
return (
<Fragment>
<Sidebar />
<Content />
</Fragment>
)
}
Here, I have created small demo for you
https://codesandbox.io/s/naughty-glade-vnj0l
Problem 1: componet spell is wrong. It should be component in the Route.
Problem 2: set exact keyword for the first route like this <Route exact path="/" componet={About} />.
Use single BrowserRouter throughout the application.
I am very new to react-routing. After reading the docs and reading some articles this is how structured my routing. Please correct me if I am doing wrong.
Using react-router V4
Routes.js
import React from 'react';
import App from '../app/components/App';
import Dashboard from '../dashboard/components/Dashboard';
import Contact from '../dashboard/components/Contact';
import Account from '../dashboard/components/Account';
import Career from '../dashboard/components/Career';
import NoMatch from './NoMatch';
import { Provider } from 'react-redux';
import { Route, BrowserRouter, Switch, Redirect } from 'react-router-dom';
const Root = ({ store }) => (
<Provider store={store}>
<BrowserRouter>
<div>
<Route path="/app" component={App} />
<Switch>
<Route path="/app" exact component={Dashboard} />
<Route path="/app/home/dashboard" component={Dashboard} />
<Route path="/app/home/contact" component={Contact} />
<Route path="/app/home/account" component={Account} />
<Route path="/app/home/career" component={Career} />
<Route component={NoMatch} />
</Switch>
</div>
</BrowserRouter>
</Provider>
)
export default Root
I used /app 2 times. First is to load always as it has sidenav and header. Then inside switch I used to load default component dashboard.
App.js
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';
import Header from './Header';
import SideNav from './SideNav';
class AppComp extends Component {
componentDidMount() {
const { match: { params } } = this.props;
}
render() {
return (
<div>
<div className="container body">
<div className="main_container">
<Header />
<SideNav routeparams={this.props}/>
</div>
</div>
</div>
);
}
}
export default AppComp;
Sidenav.jsx
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
import '../../css/sidenav.css';
class SideNav extends Component {
render() {
console.log(this.props.routeparams);
return (
<div className="col-md-3 left_col">
<div className="left_col">
<div className="clearfix"></div>
<div id="sidebar-menu">
<div className="menu">
<ul className="nav side-menu">
<li>
<NavLink to="/app/home/dashboard">Home</span></NavLink>
<ul>
<li className="current-page">
<NavLink to="/app/home/dashboard" activeClassName="current">Dashboard</NavLink>
</li>
<li>
<NavLink to="/app/home/contact" activeClassName="current">Contact</NavLink>
</li>
<li>
<NavLink to="/app/home/account" activeClassName="current">Account</NavLink>
</li>
<li>
<NavLink to="/app/home/career" activeClassName="current">Career</NavLink>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
);
}
}
export default SideNav;
I have two issue :
this.props.routeparams in sidenav logged twice which means sidenav rendered twice . this is happening after adding routing . Also this.props.routeparams match path is always /app, which I think because sidenav is a child component of app component. How can I fix this ? I want to get current route path in sidenav.
activeClassName="current" gets applied to correct navlink but the css style gets reflected only if I click somewhere in the page. Seems so strange. I can resolve that issue if I get current match.path at sidenav component then I will do it custom way without activeClassName.
Any help would be greatly appreciated.