How to use Link in React? - javascript

I am currently working on the react project which is a login-signup app using reactstrap. But I'm facing a problem when I use Link in the signup component in order to link the login component. Please help me to solve this problem.
component/signup.js:
import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import '../App.css';
import {Button , Form, FormGroup, Label, Input} from 'reactstrap'
export class signup extends Component {
render() {
return (
<Form className="login-form App">
<h4 className="font-weight-bold text-center"> Sign Up Form</h4>
<FormGroup>
<Label>Full Name</Label>
<Input type="text" placeholder="Full Name"></Input>
</FormGroup>
<FormGroup>
<Label>Email</Label>
<Input type="email" placeholder="Email Address"></Input>
</FormGroup>
<FormGroup>
<Label>Password</Label>
<Input type="password" placeholder="Password"></Input>
</FormGroup>
<Button type="submit" className="btn-primary btn-lg btn-block">Sign Up</Button>
<p>Already Signup, <Link to ="/Login">Login</Link></p>
</Form>
)
}
}
export default signup
component/login.js:
import React, { Component } from 'react'
import '../App.css';
import {Button , Form, FormGroup, Label, Input} from 'reactstrap'
export class Login extends Component {
render() {
return (
<Form className="login-form App">
<h4 className="font-weight-bold text-center"> Login Form</h4>
<FormGroup>
<Label>Email</Label>
<Input type="email" placeholder="Email Address"></Input>
</FormGroup>
<FormGroup>
<Label>Password</Label>
<Input type="password" placeholder="Password"></Input>
</FormGroup>
<Button type="submit" className="btn-primary btn-lg btn-block">Login</Button>
</Form>
)
}
}
export default Login
App.js:
import React, { Component } from 'react'
import Signup from './component/signup'
import './App.css';
class App extends Component {
render() {
return (
<Signup />
)
}
}
export default App

You need to define the Login route in your App.js:
import React, { Component } from 'react'
import Signup from './component/signup'
import Login from './component/login' //Login should also be imported
import './App.css'
import { BrowserRouter as Router, Route } from "react-router-dom"//Router
class App extends Component {
render() {
return (
<Router> {/* Creating applications routes */}
<Route exact path="/" component={Signup} /> {/*Signup Route*/}
<Route exact path="/Login" component={Login} /> {/*Login Route*/}
</Router>
)
}
}
export default App
Notice I defined your signup on the root of your application (/). You can point it to wherever you want and you may need to define other routes in your App.js

Your code is missing some important part:
Link component are always wrapped up with Router component
In order to Link the component you have a Switch component containing the Route component.
Below is a sample code to use Link, Route, Router & Switch. Hope this will help
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Route, Link, BrowserRouter as Router, Switch } from "react-router-dom";
import "./styles.css";
const User = ({ match }) => {
console.log(match);
return <h1>User: {match.params.id}</h1>;
};
class Users extends Component {
render() {
return (
<div>
<h1>Users</h1>
<h2>Select a user</h2>
<li>
<Link to="/user/1">user 1</Link>
</li>
<li>
<Link to="/user/2">user 2</Link>
</li>
<li>
<Link to="/user/3">user 3</Link>
</li>
<Route path="/user/:id" component={User} />
</div>
);
}
}
class Contact extends Component {
render() {
return (
<div>
<h1>Contact</h1>
</div>
);
}
}
function App() {
return (
<div>
<h1>Home</h1>
</div>
);
}
function NotFound() {
return <h1>Not Found</h1>;
}
const routing = (
<Router>
<div>
<ul>
<li>
<Link to="/">home</Link>
</li>
<li>
<Link to="/users">users</Link>
</li>
<li>
<Link to="contact">contact</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={App} />
<Route path="/users" component={Users} />
<Route path="/contact" component={Contact} />
<Route component={NotFound} />
</Switch>
</div>
</Router>
);
const rootElement = document.getElementById("root");
ReactDOM.render(routing, rootElement);
CodeSandbox demo: working code demo

When you want to use the Link component to define which links in your component. You must use at the highest level of your Component tree the BrowserRouter component from react-router-dom
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { React } from 'react';
import { Signup } from './component/signup';
import { Login } from './component/Login';
export default function App(props) {
return (
<div>
// Any code goes here
<Router>
<Switch>
<Route exact={true} path="/login" component={Login}/>
<Route exact={true} path="/signup" component={Login}/>
<Redirect path="/login" />
</Switch>
</Router>
// Any code goes here
</div>
)
}
After you have use Router to define which component is rendered on given path in the Highest component in the component tree you can use Link in any Child component

Related

utils.ts:757 Uncaught Error: [div] is not a <Route> component

I try to make a route of Register and Login components inside a div(className='container') in react-router v6, but when i try to access these components I reach a blank page, then when i rid the div class it works very well, i don't know if the problem from the div. please help me to fix it:
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, Outlet, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
function App() {
return (
<Router >
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<div className="container">
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</div>
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
import React, { Component } from 'react';
import {Outlet} from 'react-router-dom';
class Register extends Component {
render() {
return (
<div >
<h1>Register</h1>
</div>
)
}
}
export default Register;
import React, { Component } from 'react';
import {Outlet} from 'react-router-dom';
class Login extends Component {
render() {
return (
<div>
<h2>Login</h2>
</div>
)
}
}
export default Login;
import React, { Component } from 'react';
import { Link, Outlet } from "react-router-dom";
class Landing extends Component {
render() {
return (
<div className="landing">
<div className="dark-overlay landing-inner text-light">
<div className="container">
<div className="row">
<div className="col-md-12 text-center">
<h1 className="display-3 mb-4">Developer Connector
</h1>
<p className="lead"> Create a developer profile/portfolio, share posts and get help from other developers</p>
<hr />
<Link to="/register" className="btn btn-lg btn-info mr-2">Sign Up</Link>
<Link to="/login" className="btn btn-lg btn-light">Login</Link>
</div>
</div>
</div>
</div>
</div>
)
}
};
export default Landing;
When you try to put a DIV object as a route, the problem occurs.
I suggest you remove the DIV from the APP component and put it inside each page (register, login) as needed.
Wish you the best!
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, Outlet, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
function App() {
return (
<Router >
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
Don't use div inside Routes. Use Route with some custom components.

how to create new react routes in a component according to the props?

I am trying to create a new react routes according to the props of components.
App.js routes the landing page to the Home component.
import "./App.css";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<div>
<Navbar />
<Router>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>
</div>
);
}
export default App;
I have service card file where I want to create new routes according to props.
Like for example
route = lorem -> /services/lorem
route = ipsum -> /services/ipsum
Servicecard looks like this
import React from "react";
import "../css/servicecard.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
const ServiceCard = ({ text, subClass, image, route }) => {
return (
<>
<div className={`card-container ${subClass}`} data-aos="fade-up">
<span className="card-title">{text}</span>
<img src={image} alt="service-icon" />
</div>
</>
);
};
export default ServiceCard;
i think you are talking about route params, here is an example:
export default function ParamsExample() {
return (
<Router>
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to="/netflix">Netflix</Link>
</li>
<li>
<Link to="/zillow-group">Zillow Group</Link>
</li>
<li>
<Link to="/yahoo">Yahoo</Link>
</li>
<li>
<Link to="/modus-create">Modus Create</Link>
</li>
</ul>
<Switch>
<Route path="/:param" children={<Child />} />
</Switch>
</div>
</Router>
);
}
and in the component child:
function Child() {
let { param } = useParams();
return (
<div>
<h3>ID: {param}</h3>
</div>
);
}

Nested routing in react.js is not giving the desired results

I want to display a custom component Resource.js whenever I click the linked text within a labCard.js component. On using the Outlet hook the Resource component is displayed within the lab Card and the Body.js component is not replaced. Body.js component is a collection of labCards component. My desire is to display the resource component in place of body component whenever I click Begin on the labCard component.
This is the App component
import React from 'react'
import { Routes, Route } from 'react-router-dom'
import Navbar from './components/Navbar'
import Home from './components/Home'
import Body from './components/Body'
import AboutUs from './components/AboutUs'
import GetHelp from './components/GetHelp'
import Footer from './components/Footer'
import Resource from './subComponents/Resource'
import './App.css';
function App() {
return (
<div>
<Navbar />
<Routes>
<Route path="/" element={ <Home /> } />
<Route path="/body/*" element={ <Body /> } >
<Route path="resource" element={ <Resource /> } />
</Route>
<Route path="/about" element={ <AboutUs /> } />
<Route path="/help" element={ <GetHelp /> } />
</Routes>
<Footer />
</div>
);
}
export default App;
This is the body Component
import React from 'react'
import LabCard from '../subComponents/LabCard'
import { data } from '../data'
import './Body.css'
export default function Body() {
const [labData, setLabData] = React.useState(data)
let labCardElements = labData.map(lab =>
<LabCard
key={lab.id}
labID={lab.id}
labType={lab.type}
labTitle={lab.title}
labResourceUrl={lab.resourceUrl}
/>)
return (
<section className='experiment-body-section'>
<h1 className='experiment-body--title'>Experiments</h1>
<p className='experiment-body--description'>Here are all the experiments</p>
<div className='experiment-body'>
{labCardElements}
</div>
</section>
)
}
This is the labCard component
import React from 'react'
import { Link } from 'react-router-dom'
import './Card.css'
export default function LabCard(props) {
return (
<div className='lab-card'>
<p className='lab-card--id'>{props.labType}</p>
<h2 className='lab-card--title'>{props.labTitle}</h2>
<div className="parent">
<div className='lab-card--overlay'></div>
<Link to="resource" className='lab-card-overlay--button'>Begin</Link>
</div>
</div>
)
}
If I'm understanding your question/issue correctly, it is that you don't want to render both the Body and Resource components at the same time.
In this case you should render Body on a nested index route. Both nested routes will be rendered into an Outlet by default on the parent route.
<Route path="/body">
<Route index element={<Body />} /> // <-- "/body"
<Route path="resource" element={<Resource />} /> // <-- "/body/resource"
</Route>

text for h1 tag is not showing in browser

I am trying to display text in h1 tags but only about but about.js displays text. First one is shop.js component and second file is app.js file.
import React from 'react';
import './App.css';
function Shop() {
return (
<div>
<h1>Shop page</h1>
</div>
);
}
export default Shop;
My App component:
import React from 'react';
import Nav from './Nav';
import Shop from './Shop';
import About from './About';
import Home from './Home';
import './App.css';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<Nav />
<Switch>
<Router path="/" exact component={Home} />
<Route path="/about"component={About} />
<Router path="/shop" component={Shop} />
</Switch>
</div>
</Router>
);
}
export default App;
Your routes and the Shop component itself look fine, so I'm guessing you just forgot to export the Shop component:
export function Shop() {
return (
<div>
<h1>Shop page</h1>
</div>
);
}
try adding shop route before home route like this:
<Route path="/about"component={About} />
<Router path="/shop" component={Shop} />
<Router path="/" exact component={Home} />
i have created a code expample here

ReactJS, react-router: Ecxclude Navigation Menu in Login Page

So I have a LoginPage that looks like this,
and when you login, you will be directed to this page:
now, I want my login page to don't have a navigation and look like this,
how can I do that?
so I have this, in my App.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import LoginPage from "./Login";
import Main from "./Main";
import Menu from "./Menu";
class App extends Component {
constructor(props){
super(props);
this.state={
loginPage:[],
uploadScreen:[]
}
}
render() {
return (
<div className="ui container">
<Route path="/" exact component={LoginPage} />
<Menu />
<Main />
</div>
);
}
}
export default App;
My Menu.js:
import React from 'react';
import { Link } from 'react-router-dom';
import {
Container,
Dropdown,
Menu,
} from 'semantic-ui-react';
const FixedMenuLayout = () => (
<div>
<Menu fixed='top' inverted>
<Container>
<Menu.Item as='a' header>
IRC
</Menu.Item>
<Menu.Item as={ Link } to= "/upload" >Create Material</Menu.Item>
<Menu.Item as={ Link } to= "/assign-material" >Assign Material</Menu.Item>
<Menu.Item as={ Link } to= "/create-group">Create Group</Menu.Item>
<Menu.Item as={ Link } to= "/assign-doctor">Assign Group</Menu.Item>
<hr />
<Dropdown item simple text='Name of Logged In User'>
<Dropdown.Menu>
<Dropdown.Item>Log Out</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Container>
</Menu>
</div>
)
export default FixedMenuLayout
and my Main.js:
import React from 'react';
import { Route ,Switch } from 'react-router-dom';
import UploadScreen from "./UploadScreen";
import CreateGroup from "./CreateGroup";
import AssignDoctor from "./AssignDoctor";
import AssignMaterial from "./AssignMaterial";
const Main = () => (
<main>
<Switch>
<Route path="/upload" exact component={UploadScreen} />
<Route path="/assign-material" exact component={AssignMaterial} />
<Route path="/assign-doctor" exact component={AssignDoctor} />
<Route path="/create-group" exact component={CreateGroup} />
</Switch>
</main>
)
export default Main
I am new in ReactJS so please be considerate in answering and thank you for your time!
my App.js
render() {
const path = window.location.pathname;
return (
<div className="ui container">
<Route path="/" exact component={LoginPage} />
{path !== '/' &&
<div>
<Menu />
<Main />
</div>
}
</div>
);
}
and it works now :)

Categories