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>
Related
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
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>
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'm using react-router v4 for routing in React. The issues i'm facing is that the react-router changes the location but is unable to render the component. I heard that using redux with react blocks updates but i'm not using redux here .
Sidebar.js
import React, {Component} from 'react';
import {
BrowserRouter as Router,
Link
} from 'react-router-dom';
import $ from 'jquery';
import {withRouter} from 'react-router-dom';
class Sidebar extends Component {
render () {
return (
<Router>
<div>
<button className="navbar-toggler" data-toggle="collapse" data-target="#pill">
<span><i className="fa fa-ellipsis-v"></i> menu</span>
</button>
<div id="pill">
<ul className="nav nav-pills flex-column sidebar">
<li className="nav-item">
<Link to="/" className="nav-link">
<i className="fa fa-dashboard"></i> Dashboard
</Link>
</li>
<li className="nav-item">
<a href="#students" className="nav-link" data-toggle="collapse">
<i className="fa fa-users"></i> Students
</a>
<ul className="collapse" id="students" style={{marginLeft: '-25px'}}>
<li className="nav-item"><Link to="/students" className="nav-link"><i className="fa fa-eye"></i> View students</Link></li>
</ul>
</li>
</ul>
</div>
</div>
</Router>
)
}
}
export default withRouter(Sidebar);
App.js
import React, { Component } from 'react';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Dashboard from './Dashboard';
import Students from './Students';
class App extends Component {
render() {
const { match } = this.props;
return (
<Router>
<div>
<Navbar />
<div className="container-fluid main">
<div className="row">
<div className="col-sm-2 area-left">
<Sidebar />
</div>
<div className="col-sm-10 area-right float-right">
<div>
<Route exact path="/" component={Dashboard} />
<Route exact path="/students" component={Students} />
</div>
</div>
</div>
</div>
</div>
</Router>
);
}
}
export default App;
When route is /
When route is /students
Reloading the page renders the component
The Link you specified in your sidebar is trying to use the Router you wrapped the component in, not the Router you defined your links in.
This is what your sidebar component should look like.
import React, {Component} from 'react';
import {
Link,
withRouter
} from 'react-router-dom';
import $ from 'jquery';
class Sidebar extends Component {
render () {
return (
<div>
<div>
<button className="navbar-toggler" data-toggle="collapse" data-target="#pill">
<span><i className="fa fa-ellipsis-v"></i> menu</span>
</button>
<div id="pill">
<ul className="nav nav-pills flex-column sidebar">
<li className="nav-item">
<Link to="/" className="nav-link">
<i className="fa fa-dashboard"></i> Dashboard
</Link>
</li>
<li className="nav-item">
<a href="#students" className="nav-link" data-toggle="collapse">
<i className="fa fa-users"></i> Students
</a>
<ul className="collapse" id="students" style={{marginLeft: '-25px'}}>
<li className="nav-item"><Link to="/students" className="nav-link"><i className="fa fa-eye"></i> View students</Link></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
)
}
}
export default withRouter(Sidebar);
More explanation:
You should only wrap your top level component in the router since it for lack of better terms spawns all the children in your app. Furthermore, it will automatically inject the props for the router unless you are using redux. So unless you're using redux no need for withRouter() *.
*lmk if i'm wrong, i'm not an expert.
Example of your top level app component:
render() {
return(
<Router history={History}>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/student" component={Student} />
</Switch>
</Router>
)
}
Essentially wrap your Route with Switch.
Update App.js to the below
import React, { Component } from 'react';
import Navbar from './Navbar';
import Sidebar from './Sidebar';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Dashboard from './Dashboard';
import Students from './Students';
class App extends Component {
render() {
const { match } = this.props;
return (
<Router>
<div>
<Navbar />
<div className="container-fluid main">
<div className="row">
<div className="col-sm-2 area-left">
<Sidebar />
</div>
<div className="col-sm-10 area-right float-right">
<Switch>
<Route exact path="/" component={Dashboard} />
<Route exact path="/students" component={Students} />
</Switch>
</div>
</div>
</div>
</div>
</Router>
);
}
}
export default App;
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.