I am building a web app to learn react and when I tried to make the menu, my menu links doesn't work. The strange thing is that I am using materialize css and the mobile menu works perfectly but in large screens, as my computer, it doesn't work and the Links tags are the same! Help!
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Features from './pages/Features';
import Archives from './pages/Archives';
import Settings from './pages/Settings';
import Home from './pages/Home';
class Index extends React.Component{
print(){
console.log("TESTE####");
}
render(){
return(
<div>
<Router>
<div>
<nav className="light-blue lighten-1" role="navigation">
<div id="navbar" className="nav-wrapper container">
<Link to="/" className="brand-logo">App Teste</Link>
<div className="right hide-on-med-and-down">
<ul className="tabs tabs-transparent" style={{height: 64}}>
<li className="tab" style={{paddingTop: 10}}><Link to="features" onClick={this.print}>Features</Link></li>
<li className="tab" style={{paddingTop: 10}}><Link to="archives">Archives</Link></li>
<li className="tab" style={{paddingTop: 10}}><Link to="settings">Settings</Link></li>
</ul>
</div>
<ul id="nav-mobile" className="side-nav">
<li><Link to="features">Features</Link></li>
<li><Link to="archives">Archives</Link></li>
<li><Link to="settings">Settings</Link></li>
</ul>
<i className="material-icons">menu</i>
</div>
</nav>
<Route exact path="/" component={Home}/>
<Route path="/archives" component={Archives}/>
<Route path="/settings" component={Settings}/>
<Route path="/features" component={Features}/>
</div>
</Router>
</div>
);
}
}
ReactDOM.render(
<Index/>,
document.getElementById('root')
);
On each of my pages I just have a <h1></h1> saying what is the page at the moment. So if it is the Home page it shows Home, if it is the Archives page it shows Archives..
One last thing, when I click at any link, nothing happens, doesn't load the pages and doesn't change the url.
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 :)
This is my code. I want do display AddPet componet in div with class .containerManage. The links are in the aside tag. I tried to use Switch but in the newer version of react it is not in use anymore.
import style from './Manage.module.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Routes, Route, Link} from 'react-router-dom';
import AddPet from '../AddPet/AddPet';
function Manage() {
return (
<div className="row d-flex">
<aside className="col-md-2 mt-5">
<ul className={style.ulManage}>
<li><Link to="/manage/addPet">Add Pet</Link></li>
<li><Link to="">List All Pets</Link></li>
<li><Link to="">List All Users</Link></li>
<li><Link to="">Find Pet By Name</Link></li>
<li><Link to="">Find User by Name</Link></li>
</ul>
</aside>
<div className={style.containerManage}>
<Routes>
<Route path="/manage/addPet" exact element={<AddPet />}></Route>
</Routes>
</div>
</div>
);
}
export default Manage;
my live site and my code
all my links would just fine on npm start but when I ran npm run build the routes for some pages stop working. /about doesn't work at all and if you are on the 404 page and navigate back the /projects page stops working as well.
You should use BrowserRouter to wrap all your Routes in your Nav component and use Link to render About component as follows.
For more info: https://reactrouter.com/web/guides/quick-start
import "./nav.css";
import {
BrowserRouter as Router,
Route,
Link,
Redirect,
} from "react-router-dom";
import LogoS from "../imgs/logo-sm.png";
import Logo1 from "../imgs/logo-01.png";
import Projects from "./project-list";
import Aub from "./projects/auburn";
import M3d from "./projects/m3d";
import Uroute from "./projects/uroute";
import Thesis from "./projects/thesis";
import About from "./about";
import ACNH from "./projects/acnh";
const Nav = () => {
return (
<Router>
<div>
<header className="navbar">
<div className="container">
<Link to="/projects">
<p className="mb-0 navbar-brand">
<img
alt="Trisha Dring"
className="image logo d-sm-none"
src={LogoS}
/>
<img
className="image logo d-none d-sm-block"
alt="Trisha Dring"
src={Logo1}
/>
</p>
</Link>
<ul className="nav">
<li className="nav-item">
<Link
to="/about"
className="nav-link active"
aria-current="page"
>
About
</Link>
</li>
<li className="nav-item">
<a className="nav-link" href="/">
Resume
</a>
</li>
<li className="nav-item">
<a
className="nav-link"
href="mailto:trisha.dring+website#gmail.com"
>
Contact
</a>
</li>
</ul>
</div>
</header>
<Route path="/projects" component={Projects} />
<Route path="/ACNH" component={ACNH} />
<Route path="/Auburn" component={Aub} />
<Route path="/about" component={About} />
<Route path="/M3D" component={M3d} />
<Route path="/Uroute" component={Uroute} />
<Route path="/FixHFA" component={Thesis} />
<Route exact path="/">
<Redirect to="/projects" />
</Route>
</div>
</Router>
);
};
export default Nav;
By the way, in your About component, use className instead of class as follows. Otherwise, it will give warnings.
<p className="explain">Hi. I'm Trisha</p>
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