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
Related
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>
I am new to react js and I am trying to do page navigation with react-router-dom and I could not load the page even after trying many times.
index.js
import React from "react";
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import { App } from './App'
const element= <App />;
ReactDOM.render(element, document.getElementById('root'));
App.js
import React from 'react'
import {Route, BrowserRouter as Router, Link} from 'react-router-dom';
import Home from './components/Home';
import Hello from './components/Hello';
export function App()
{
return(
<div>
<Router>
<div className='container'>
<div className='navbar-header'>
<ul className='nav navbar-nav'>
<li> <Link to={'./components/Home'}>Home</Link> </li>
<li><Link to={'./components/Hello'}>Hello</Link></li>
</ul>
</div>
</div>
</ Router>
</div>
);
}
src/components/Home.jsx
In Home.jsx, I am trying to get data from API and that page works fine.
Thanks.
You are using react router wrong way. Link is just Router's implementation of <a> tag... it just change your url and redirect your youter.. you need to specify Route which should be displayed:
export function App()
{
return(
<div>
<Router>
<div className='container'>
<div className='navbar-header'>
<ul className='nav navbar-nav'>
<li> <Link to={'/'}>Home</Link> </li>
<li><Link to={'/hello'}>Hello</Link></li>
</ul>
</div>
</div>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/hello" component={Hello} />
</Switch>
</ Router>
</div>
);
}
You have to set the Routes first for each page then only you will be able to navigate to the pages .
Please go through this resource resource.
This is a very good resource to follow .
I hope this solves your issue :)
! [My Output is shown like this. ]1. I created one react project, and for designing I am using Bootstrap framework. I am done routing in my project. Routing is working fine, But Navbar is not working properly in my react project. So help me to resolve this issue.
This is App.js
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Pages/Home/Home';
import Edit from './Pages/Edit/Edit';
import Create from './Pages/Create/Create';
import Navbar from './Components/Navbar/Navbar';
function App() {
return (
<Router>
<Navbar></Navbar>
<div className="container">
<h2>MERN</h2>
<Route path='/' exact component={Home}></Route>
<Route path='/id:/edit' component={Edit}></Route>
<Route path='/create' component={Create}></Route>
</div>
</Router>
);
}
export default App;
In Components Folder, I have Navbar folder, I Navbar folder I have Navbar.js
In Navbar.js
import React, { Component } from "react";
import "./Navbar.css";
import { Link } from "react-router-dom";
export default class Navbar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="www.facebook.com">
Navbar
</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<Link to="/">Home</Link>
</li>
<li className="nav-item">
<Link to="/create">Create</Link>
</li>
<li className="nav-item">
<Link to="/id:/edit">Edit</Link>
</li>
</ul>
</div>
</nav>
</div>
);
}
}
In Pages Folder I have three folders 1)Home 2)Create 3)Edit
This is Home.js
import React, { Component } from "react";
import "./Home.css";
export default class Home extends Component {
render() {
return (
<div>
<p>Welcome to Home Component</p>
</div>
);
}
}
This is Create.js
import React, { Component } from "react";
export default class Create extends Component {
render() {
return (
<div>
<p>Welcome to Create Component</p>
</div>
);
}
}
This is Edit.js
import React, { Component } from "react";
export default class Edit extends Component {
render() {
return (
<div>
<p>Welcome to Edit Component</p>
</div>
);
}
}
In my react project Routing is working fine, but Navbar is not working properly. If I am not clear with my doubt please put a comment.
Actually you just forgot to add the necessary className to your Links.
Add className="nav-link" to Links in Navbar.js.
<ul className="navbar-nav">
<li className="nav-item active">
<Link to="/" className="nav-link">
Home
</Link>
</li>
<li className="nav-item">
<Link to="/create" className="nav-link">
Create
</Link>
</li>
<li className="nav-item">
<Link to="/id:/edit" className="nav-link">
Edit
</Link>
</li>
</ul>
Have you tried adding the Switch component around all of your <Route> components?
You can find a similar example to what you are trying to achieve here in the first basic example.
Try:
<Router>
<Navbar></Navbar>
<div className="container">
<h2>MERN</h2>
<Switch>
<Route path='/' exact component={Home}></Route>
<Route path='/id:/edit' component={Edit}></Route>
<Route path='/create' component={Create}></Route>
</Switch>
</div>
</Router>
I am assuming by not-working properly, the "active" class is not changing.
For this you can use "NavLink" instead of "Link" from the react-router-dom package and do not hardcode the "active" class to the <li>
import { NavLink } from 'react-router-dom';
...
<li className="nav-item">
<NavLink to='/' activeClassName="active">Home</NavLink>
</li>
<li className="nav-item">
<NavLink to='/create' activeClassName="active">Create</NavLink>
</li>
<li className="nav-item">
<NavLink to='/id:/edit' activeClassName="active">Edit</NavLink>
</li>
...
I'm working on React app and trying to deploy on IIS.
It works fine but the Router is not showing correctly.
My expected path when I click the link 'Test' is 'http://localhost/test/TestRouter/' but it displays 'http://localhost/TestRouter/' instead.
Here is my code:
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Test from './Test';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/TestRouter/">Test</Link>
</li>
</ul>
</nav>
<Route path="/TestRouter/" component={Test} />
</div>
</Router>
</div>
);
}
export default App;
Test.js
import React from 'react';
class Test extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<p>Test</p>
</div>
);
}
}
export default Test;
package.json:
"homepage": "/test/",
Then I deploy on IIS, under Default Web Site/test
My problem is when I click 'Test' link, the url now displays 'http://localhost/TestRouter/'.
My expectation is that the url should displays 'http://localhost/test/TestRouter/'.
Is there anyone here can help me to correct the Router?
Thank you in advanced.
You need to add basename to the Router:
<Router basename='/test'>
path="test/TestRouter"
There is option to fill the path directly
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/test/TestRouter">Test</Link>
</li>
</ul>
</nav>
<Route path="test/TestRouter" component={Test} />
</div>
</Router>
And option like the comment here
<Router basename='/test'>
<div>
<nav>
<ul>
<li>
<Link to="/TestRouter">Test</Link>
</li>
</ul>
</nav>
<Route path="/TestRouter" component={Test} />
</div>
</Router>
Did you sure you try this as it wrote?
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.