Develop Reference

routes not render the content of Register component and Login component

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;

React router link not rendering to component

Hello i have done everything but i dnt know why still its not working. am using react and router latest version.Stil am not able to opening my contact page.I have tried everything to solve it but still am not able to do it?
Hello i have done everything but i dnt know why still its not working. am using react and router latest version.Stil am not able to opening my contact page.I have tried everything to solve it but still am not able to do it?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import New from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
import Services from './components/Services';
import Name from './components/pages/Name';
import { BrowserRouter as Router, Switch,Route,Link,Routes,Redirect} from "react-router-dom";
const App = () => {
return(
<>
<Router>
<New/>
<Switch>
<Route Path='/' exact component = {Home} />
<Route Path='/About' exact component = {About} />
<Route Path='/Services' exact component = {Services}/>
<Route Path='/Name' exact component = {Name}/>
<Route Path='/Home' exact component = {Home}/>
</Switch>
</Router>
</>
)
}
export default App;
Conatct.jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import ReactDOM from 'react-dom';
function Contact () {
return (
<>
<h1>contact</h1>
</>
)
}
export default Contact;
Pages / Name.js (i have import Contact here)
import React from 'react';
import Contact from '../Contact'
export default function Name() {
return (
<>
<Contact />
</>
);
}
Navbar.js
import React from 'react';
import './Navbar.css'
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle';
import { Button,Container,Navbar,Nav,NavDropdown,NavLink } from 'react-bootstrap';
import {
BrowserRouter as Router, Switch,Route,Link,Routes,Redirect} from "react-router-dom";
const New = () => {
return (
<div>
<div className="container-fluid">
<div className="row">
<div className='col-10 mx-auto'>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<NavLink className="navbar-brand" to="/">Navbar</NavLink>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav ms-auto mb-auto mb-lg-2">
<li className="nav-item">
<NavLink className="nav-link active" aria-current="page" to="/">Home</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/Services">Services</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/About">About</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/Contact">Contact</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
);
};
export default New;

First thing, using lowercase only in routes because browser concerto to lowercase
Second thing you need create a link component for react-router, NavLink is only UI element, not a valid like for rect router
should using this
https://reactrouter.com/web/api/Link

React Router hide App content when click other pages link

I want to hide app component content when I click on other component pages link.
Right now, when I click other links like about us, then it shows both app component and about us page component. But I want show only about us content once I click on about us page.
Also, when I define App component patch as a "/" then application keeps loading.
Below are the code
App.js
import React, { Component } from "react";
import Navigation from "./components/Navigation";
import data from "./data";
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
// data: false
};
}
render() {
return (
<div className="container">
<Navigation />
{data.map((link) => (
<div className="card mb-3" key={link.Title}>
<div className="row no-gutters">
<div className="col-md-5">
<img
src={require("./images/" + link.Img)}
className="card-img"
alt=""
/>
</div>
<div className="col-md-7">
<div className="card-body">
<h5 className="card-title">{link.Title}</h5>
<p className="card-text">{link.Desc.halfDesc}</p>
<p className="card-text">
<small className="text-muted">{link.date}</small>
</p>
<button type="button" className="btn btn-dark float-right">
Read More
</button>
</div>
</div>
</div>
<FullDescription />
</div>
))}
</div>
);
}
}
const FullDescription = (props) => (
<div className="modalbox">
<p>fsdf</p>
</div>
);
export default App;
Navigation.Js Everything is working fine only App home page content show which i don't want when i click other pages
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import Api from "./Api";
import News from "./News";
import Website from "./Website";
class Navigation extends Component {
render() {
return (
<Router>
<ul className="nav justify-content-center mb-4 navigation">
<li className="nav-item">
<Link className="nav-link" to="/Api">
Api
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/News">
News
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Website">
Website
</Link>
</li>
</ul>
<Switch>
<Route exact path="/Api" component={Api}></Route>
<Route exact path="/News" component={News}></Route>
<Route exact path="/Website" component={Website}></Route>
</Switch>
</Router>
);
}
}
export default Navigation;

For this to work you need to put content of app.js inside another component because right now it doesnt have a route to hide itself when going to other page. So you need to treat the component just like your rest components (Api.js, News.js) etc..
NewAppComponent.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
class Navigation extends Component {
render() {
return (
<ul className="nav justify-content-center mb-4 navigation">
<li className="nav-item">
<Link className="nav-link" to="/Api">
Api
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/News">
News
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Website">
Website
</Link>
</li>
</ul>
);
}
}
export default Navigation;
App.js
import React, { Component } from "react";
import Navigation from "./components/Navigation";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NewAppComponent from "./NewAppComponent";
import Api from "./Api";
import News from "./News";
import Website from "./Website";
class App extends Component {
render() {
return (
<div className="container">
<Router>
<Navigation />
<Switch>
<Route exact path="/" component={NewAppComponent}></Route>
<Route path="/Api" component={Api}></Route>
<Route path="/News" component={News}></Route>
<Route path="/Website" component={Website}></Route>
</Switch>
</Router>
</div>
);
}
}
export default App;
NewAppComponent.js
// NewAppComponent.js
import React, { Component } from "react";
import data from "./data";
class NewAppComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
// data: false
};
}
render() {
return (
<div className="container">
{data.map((link) => (
<div className="card mb-3" key={link.Title}>
<div className="row no-gutters">
<div className="col-md-5">
<img src={require("./images/" + link.Img)} className="card-img" alt="" />
</div>
<div className="col-md-7">
<div className="card-body">
<h5 className="card-title">{link.Title}</h5>
<p className="card-text">{link.Desc.halfDesc}</p>
<p className="card-text">
<small className="text-muted">{link.date}</small>
</p>
<button type="button" className="btn btn-dark float-right">
Read More
</button>
</div>
</div>
</div>
<FullDescription />
</div>
))}
</div>
);
}
}
const FullDescription = (props) => (
<div className="modalbox">
<p>fsdf</p>
</div>
);
export default NewAppComponent;

react router v4 error Link component

i have component that import a Link from react-router-dom
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Sidebar extends Component{
render() {
return (
<div className="be-left-sidebar">
<div className="left-sidebar-wrapper">Blank Page
<div className="left-sidebar-spacer">
<div className="left-sidebar-scroll">
<div className="left-sidebar-content">
<ul className="sidebar-elements">
<li className="divider">Menu</li>
<li className="parent"><i className="icon mdi mdi-home" /><span>Home</span>
<ul className="sub-menu">
<li><Link to='/'>Home</Link>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div className="progress-widget">
<div className="progress-data"><span className="progress-value">60%</span><span className="name">Current Project</span></div>
<div className="progress">
<div style={{width: '60%'}} className="progress-bar progress-bar-primary" />
</div>
</div>
</div>
</div>
);
}
};
export default Sidebar;
then console.log shows an error
Warning: Failed context type: The context router is marked as required in Link, but its value is undefined.
Cannot read property 'history' of undefined
`
i am new in react and i am using react router v4.1.1
anyone can help me?
thanks

Make sure you have your component appearing inside <Router> component.

In React router v4, we have Switch, Route and Link components that we import from react-router-dom and configure our router as follows:
import { Switch, Route, Link } from 'react-router-dom';
<span>LINKS:</span>
<ul>
<li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
<li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
<li onClick={this.props.goToSub2}><Link to={'/left-sub2'}>Go To Two</Link></li>
</ul>
<Switch>
<Route exact path='/' component={LeftSubDefault} />
<Route path='/left-sub1' component={LeftSubOne} />
<Route path='/left-sub2' component={LeftSubTwo} />
</Switch>
In the app.js or whatever your entry file is. Wrap your App component inside BrowserRouter as follows:
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<App />
</BrowserRouter>
Here is a wonderful article that may help.

React js - Why is navbar component not being imported?

It works when I give the part inside app.js but it shows blank screen when it is put in another file navbar.js and imported. If the code in navbar.js is directly added in app.js instead of importing, it works fine and navbar appears. Otherwise blank screen appears.
index.js is shown below:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
app.js file
import React, { Component } from 'react';
import navbar from './navbar.js';
class home extends Component {
render() {
return (
<div>
<navbar />
</div>
);
}
}
export default home;
navbar.js file:
import React, { Component } from 'react';
import {Navbar} from 'react-bootstrap';
import {NavItem} from 'react-bootstrap';
import {Nav} from 'react-bootstrap';
class navbar extends Component{
render() {
return (
<Navbar collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default navbar;
Please help, thanks in advance.

You should always start the name of your custom React components with
a uppercase letter.
import React, { Component } from 'react';
import Navbar from './Navbar.js';
class Home extends Component {
render() {
return (
<div>
<Navbar />
</div>
);
}
}
export default Home;
and it's recommended to use the same name for the file name as well. So it should be ./Navbar.js instead of ./navbar.js
Read this page from the official documentation for more information.
Always start component names with a capital letter. For example, <div/> represents a DOM tag, but <Welcome /> represents a component and
requires Welcome to be in scope.