i'm trying to implement router to my reactjs app and after setting things up, my page wont even load, it just keeps reloading in my browser till it crashs.
This is my app.js
import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
class App extends Component {
render() {
return (
<div className="App">
<Header />
<Content
job={this.state.header_infos[0].job}
college={this.state.header_infos[0].college}
/>
<Skills />
<Portfolio />
<Timeline />
<Footer />
<BrowserRouter>
<Route exact path="/" component={App} /> /* if it clicks in my logo, redirect to mainpage */
<Route path="/monitoria" component={Monitoria} /> /* if clicks in Monitoria from Navbar, redirects to Monitoria component. */
</BrowserRouter>
</div>
);
}
}
And this is my Header.js with my navbar
import React from "react";
import "../sass/Header.scss";
import { NavLink } from "react-router-dom";
const Header = () => {
return (
<header className="">
<NavLink exact to="/">
<h1 className="logo">Logo</h1>
</NavLink>
<input type="checkbox" id="nav-toggle" className="nav-toggle" />
<nav>
<ul>
<li className="menu-item">
<NavLink to="/monitoria">Monitoria</NavLink>
</li>
<a className="btn-rounded" href="#">
<li className="menu-item">Fale comigo</li>
</a>
</ul>
</nav>
<label htmlFor="nav-toggle" className="nav-toggle-label">
<span />
</label>
</header>
);
};
export default Header;
If i remove React Router DOM from my App.js my page works just fine. What i'm doing wrong?
As mentioned in comment, in app.js, you are assigning class App into a route that is contained in the App class.
Related
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.
I'm trying to render a component inside my dashboard component by clicking a Link in that component,
I need to render Home or Contacts or About component inside my div
should I use array to store the components I want to render or route? adn how do I do it?
import React, { useContext, useEffect, useState, Fragment } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contacts from "./Contacts";
const DashBoard = () => {
const authContext = useContext(AuthContext);
return (
<div>
<div> // this is my side nav
<Route>
<ul>
<li>
<Link to="/dashboard/home">Home</Link>
</li>
<li>
<Link to="/">Issues</Link>
</li>
<li>
<Link to="/">Contacts</Link>
</li>
<li>
<Link to="/dashBoard/about">About</Link>
</li>
</ul>
</Route>
</div>
<div>
<nav>
<button
className="btn btn-primary"
id="menu-toggle"
onClick={() => setIsToggled(!isToggled)}
>
Toggle Menu
</button>
</nav>
<div className="container-fluid">
// i need to render a component here ex.) <Home/> | <Contacts/> | <About/> when a Link is clicked!
</div>
</div>
</div>
);
};
export default DashBoard;
in my app.js
<Fragment>
<Navbar />
<div className="">
<Switch>
<Route exact path="/dashBoard" component={DashBoard} />
<Route exact path="/login" component={Login} />
</Switch>
</div>
</Fragment>
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.
error screenshotI am trying to include React-router in my React app , and i am using it in the navigation component, but after using it and initializing the path , my react app is crashing . Please refer code below :
Have tried writing according t react-router v4 syntax , the is used in the App.js file and the Link and Route have been used in Navigation.js component .
import React,{ Component } from 'react';
import { Route, Link } from "react-router-dom";
import './Navigation.css';
import App from '../../App';
import Create from '../pages/create/Create';
import List from '../pages/list/List';
class Navigation extends Component{
render(){
return (
<div>
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<Link className="navbar-brand mr-auto" to="/">HOME</Link>
<div id="navbarSupportedContent">
<ul className="navbar-nav">
<li className="nav-item active">
<Link className="nav-link" to="/Create">Create</Link>
</li>
<li className="nav-item" >
<Link className="nav-link" to="/List">List</Link>
</li>
</ul>
</div>
</nav>
{/* <Route path="/" exact component={App} /> */}
<Route path="/Create" component={Create} />
<Route path="/List" component={List} />
</div>
);
}
}
export default Navigation;
App.js:
import React, { Component } from 'react';
import Navigation from './js/navigation/Navigation.js';
import { BrowserRouter as Router } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Navigation/>
<div class="jumbotron text-center">
<h1 class="display-4">Welcome</h1>
<hr class="my-4"/>
<p>Please Click on Create to Create the Schema and on List to View the Schema.</p>
</div>
</div>
</Router>
);
}
}
export default App;
when i run the app and click on Create or List , respective components should be rendered but app is crashing when i run the react-app.
According to your crash screenshot, Your app is entering an infinite loop in your Create Component, please check your create component code
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.