i did routes of my social chat app with react v6, so the app component display their content but the other ones(Register component and Login component) didn't show me its own content, i have no idea how to fix this problem. this is my code:
enter code here
import './App.css';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
import MatchPath from "./utils";
import React from 'react';
function App() {
return (
<Router >
<div className="App">
<Navbar />
<Routes>
<Route path="" element={<Landing />} />
<Route path="" element={
<div className="container">
<Route path="register" element={< Register/>} />
<Route path="login" element={< Login/>} />
</div>
} ></Route>
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
import React, { Component } from 'react';
class Register extends Component {
render() {
return (
Register
</div>
)
}
}
export default Register;
import React, { Component } from 'react'
class Login extends Component {
render() {
return (
Login
LoginLoginLoginLogin
)
}
}
export default Login;
import React, { Component } from 'react';
import { Link } from "react-router-dom";
class Navbar extends Component {
render() {
return (
DevConnector
<div className ="collapse navbar-collapse" id="mobile-nav">
<ul className ="navbar-nav mr-auto">
<li className ="nav-item">
<Link className ="nav-link" to="/profiles"> Developers
</Link>
</li>
</ul>
<ul className ="navbar-nav ml-auto">
<li className ="nav-item">
<Link className ="nav-link" to="register">Sign Up</Link>
</li>
<li className ="nav-item">
<Link className ="nav-link" to="login">Login</Link>
</li>
</ul>
</div>
</div>
</nav>
)
}
}
export default Navbar;
Related
I am trying to link a section ID using NavLink of react-router-dom but the link is requested to the server but does not link the specific id.
I want to link section Id with Navlink so that I can easily call the Id by clicking on the Navlink.
*Navbar.js*
import React from "react";
import "./Navbar.css";
import { NavLink } from "react-router-dom";
const Navbar = () => {
return (
<>
<nav>
<div className='container spaceB flex'>
<div className='leftSide'>
<NavLink className='navLink' to={"/"}>
<h1 className='logoH'>{"<Rajib/>"}</h1>
</NavLink>
</div>
<div className='rightSide'>
<ul className='flex'>
<NavLink className='navLink' to='/#intro'>
<li>About</li>
</NavLink>
<NavLink className='navLink' to='/#skills'>
<li>Skills</li>
</NavLink>
<NavLink to='/#works' className='navLink'>
<li>Works</li>
</NavLink>
</ul>
<NavLink className='navLink' to='/#contact'>
<button className='btn'>Contact</button>
</NavLink>
</div>
</div>
</nav>
</>
);
};
export default Navbar;
*App.js*
import "./App.css";
import Intro from "./components/common/Intro";
import Navbar from "./components/common/Navbar";
import Services from "./components/common/Skills";
import Works from "./components/common/Works";
import Contact from "./components/common/Contact";
function App() {
return (
<>
<header>
<Navbar />
</header>
<main>
<Intro />
<Services />
<Works />
<Contact />
</main>
</>
);
}
export default App;
*index.js*
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<Routes>
<Route path='/' exact element={<App />} />
</Routes>
</BrowserRouter>
);
Please suggest the best solution so that i can link the section by calling it's Id in NavLink when clicking the specific navmenu.
For this project, I am following a tutorial. I am a beginner.
My code is throwing an error at
console.log(props.match.params.id);
This is the error
'match.params.id' is missing in props validation
If I change it to console.log(props), it prints {}, which is empty?
What I want it to do is print the id of the product page, in this case it would be 2. "http://localhost:3000/product/2" How can I get this to work?
Here is my full ProductScreen.js
import React from 'react';
function ProductScreen(props) {
console.log(props.match.params.id);
return <div>ProductScreen</div>
}
export default ProductScreen;
And here is app.js with my HTML in it
import React from 'react';
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import './App.css';
import HomeScreen from './Screens/HomeScreen';
import ProductScreen from './Screens/ProductScreen';
function App() {
const openMenu = () =>{
document.querySelector(".sidebar").classList.add("open");
}
const closeMenu = () =>{
document.querySelector(".sidebar").classList.remove("open");
}
return (
<BrowserRouter>
<div className="grid-container">
<header className="header">
<div className="brand">
<button onClick={openMenu}>
☰
</button>
<Link to="/" >E-Commerce</Link>
</div>
<div className="header-links">
Sign In
Cart
</div>
</header>
<aside className="sidebar">
<h3>Shopping Categories</h3>
<button className="sidebar-close-button" onClick={closeMenu}>x</button>
<ul>
<li>
Pants
</li>
<li>
Shirts
</li>
</ul>
</aside>
<main className="main">
<div className="content">
<Routes>
<Route exact path="/" element={<HomeScreen />} />
<Route path="/product/:id" element={<ProductScreen/>} />
</Routes>
</div>
</main>
<footer className="footer">
All rights reserved.
</footer>
</div>
</BrowserRouter>
);
}
export default App;
I'm sorry if that's too much or too little information, this is my first post here.
You aren't passing any props to the ProductScreen component, do this instead
import React from 'react';
import { useParams } from "react-router-dom";
function ProductScreen(props) {
// console.log(props.match.params.id);
const { id } = useParams();
console.log(id);
return <div>ProductScreen</div>
}
export default ProductScreen;
I am new to React and am trying to learn to use React-Router v5. For some reason, my components will not render through the router. Once in my App.js file, I manually rendered my Login.js from there and when I would press buttons within Login.js, router would not change components but it would change the url. I have looked far and wide and I can't seem to find a fix, I feel like it is something simple I overlooked. Here is my code.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App.js'
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
),
document.getElementById('root')
);
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import routes from '../routes.js';
class App extends React.Component {
render() {
return (
<div className="HomeNavBar">
<routes />
</div>
);
}
}
export default App
Routes.js
import React from 'react';
import { Switch, Route, Router, withRouter } from 'react-router-dom';
/**
* Import all page components here
*/
import App from './components/App';
import Login from './components/Login.js';
import Register from './components/Register.js';
/**
* All routes go here.
* Don't forget to import the components above after adding new route.
*/
export default function routes(props) {
return (
<Switch>
<Route path='/Login' component={withRouter(Login)}/>
<Route path='/Register' component={withRouter(Register)}/>
<Route exact path='/' component={withRouter(Login)}/>
</Switch>
);
}
Login.js
import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import { Link, withRouter, Router } from 'react-router-dom'
class Login extends React.Component{
render() {
return (
<div>
<div class = "topnav">
<Link to="/">
<button class="HomeButton" id="b" href="#home">CollectR</button>
</Link>
<Link to="/Register">
<button id="a">SignUp</button>
</Link>
<Link to="/Login">
<button id="a" href="#Login">Login</button>
</Link>
</div>
<div id="logo">CollectR</div>
<div>
<form id="loginform">
<label id="loginregistertext">Email</label>
<input type="text" id="logintextbox" />
<label id="loginregistertext">Password</label>
<input type="Password" id="logintextbox" />
<button id="button">Login </button>
</form>
</div>
</div>
)
}
}
export default withRouter(Login)
You need like this (taken from react-router-dom documentation):
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
I am Learning the routing system in React . I checked everything in my code and it seems to be correct but I don't know why it does not work.
Versions:
"react-router-dom": "4.2.2",
"react": "^16.8.4",
index.js
We go to the App.js from index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap-social/bootstrap-social.css';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
App.js
We implement BrowserRouter in App.js
import React, { Component } from 'react';
import { BrowserRouter} from 'react-router-dom';
import Main from './components/MainComponent';
import './App.css';
import { DISHES } from './shared/dishes';
class App extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
return (
<BrowserRouter>
<div className="App">
<Main />
</div>
</BrowserRouter>
);
}
}
export default App;
MainComponent.js
We define Routes in MainComponent.js
import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import { DISHES } from '../shared/dishes';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
const HomePage = () => {
return(
<Home />
);
}
return (
<div>
<Header />
<Switch>
<Route path='/home' component={HomePage} />
<Route exact path='/menu' component={() => <Menu dishes={this.state.dishes} />} />
<Redirect to="/home" />
</Switch>
<Footer />
</div>
);
}
}
export default Main;
HeaderComponent.js
NavBar, Nav in HeaderComponent.js
import React, { Component } from 'react';
import { Nav, Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, Jumbotron } from 'reactstrap';
import { NavLink } from 'react-router-dom';
class Header extends Component {
constructor(props) {
super(props);
this.toggleNav = this.toggleNav.bind(this);
this.state = {
isNavOpen: false
};
}
toggleNav() {
this.setState({
isNavOpen: !this.state.isNavOpen
});
}
render() {
return(
<div>
<Navbar dark expand="md">
<div className="container">
<NavbarToggler onClick={this.toggleNav} />
<NavbarBrand className="mr-auto" href="/"><img src='assets/images/logo.png' height="30" width="41" alt='Ristorante Con Fusion' /></NavbarBrand>
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<NavLink className="nav-link" to='/home'><span className="fa fa-home fa-lg"></span> Home</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/aboutus'><span className="fa fa-info fa-lg"></span> About Us</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/menu'><span className="fa fa-list fa-lg"></span> Menu</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/contactus'><span className="fa fa-address-card fa-lg"></span> Contact Us</NavLink>
</NavItem>
</Nav>
</Collapse>
</div>
</Navbar>
<Jumbotron>
<div className="container">
<div className="row row-header">
<div className="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
</div>
</div>
</Jumbotron>
</div>
);
}
}
export default Header;
I am trying to use Link instead of anchor tag. In this Link tag i am using the to property but it gives me error, such as, "You must specify 'to' property".
code of Nav.jsx
import React from "react";
import { Link, NavLink } from "react-router-dom";
const Navbar = () => {
return (
<nav className="nav-wrapper grey darken-3">
<div className="container">
<Link className="brand-logo">Sherlock Holmes</Link>
<ul className="right">
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
Code of App.jsx
import React, { Component } from "react";
import NavBar from "./components/Nav";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
class App2 extends Component {
state = {};
render() {
return (
<BrowserRouter>
<div className="App">
<NavBar />
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</BrowserRouter>
);
}
}
export default App2;
It gives me error on App.jsx page at ReactDom.render that you must specify 'to' property.
Problem
<Link className="brand-logo">Sherlock Holmes</Link>
doesn't have a to attribute
Solution
<Link to="/some_link" className="brand-logo">Sherlock Holmes</Link>