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.
Related
**App.js**
import './App.css';
import Header from "./Header.js";
import Home from "./Home.js";
import Checkout from "./Checkout.js";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<Header />
<Routes>
<Route path="/checkout" element={Header}/>
<Route exact path="/checkout" element={<Checkout />}/>
<Route exact path="/" element={<Home />}/>
<Route exact path="/" element={<Header />}/>
</Routes>
</Router>
</div>
);
}
export default App;
checkout.js
import React from 'react';
import "./Checkout.css";
import CheckoutProduct from "./CheckoutProduct.js";
import Subtotal from "./Subtotal.js";
function Checkout() {
return (
<div className="checkout">
<div className="checkout__left">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlDIcv46GCe2DRvW-CmLDn5LHyORLkJo8isA&usqp=CAU" alt="" className="checkout__add" />
<div>
<h2 className="checkout__title">
your Shopping Basket
</h2>
<CheckoutProduct />
</div>
</div>
<div className="checkout__right">
<Subtotal />
</div>
</div>
)
}
export default Checkout
I am expecting after routing to checkout component it should display all the content written inside it. but I am only seeing blank screen.(I am following the same code structure from the Udemy video)
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>
I'm working on one of my friend's half-built React Project. I'm trying to route my react-app with react-router-dom. The components inside the <switch> are not working. Here's my
App.js
import React from 'react';
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
import ProcessInput from './components/ProcessInput';
// Import react-router-dom
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App() {
return(
<Router>
<div className="App">
<Header />
<Switch>
<Route path="/" exact component={Main} />
<Route path="/process" component={ProcessInput} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;
Main.js
import React from 'react';
import Slider from './Slider';
import Card1 from './Card1';
import Card2 from './Card2';
import Prompt from './Prompt';
class Main extends React.Component {
render() {
return (
<div>
<main>
<Slider />
<Card1 />
<Card2 />
<Prompt />
</main>
</div>
)
}
}
export default Main;
The <Header /> and <Footer /> which are outside the <Switch> are showing anyways as intended. But, I want the Main component to be loaded as a root component (Launcher).
There are no errors on the console.
Please help me get to know what am I doing wrong. Thanks in advance :)
<Route path="/" exact>
<Main/>
</Route>
<Route path="/process"><ProcessInput/>
</Route>
This is the old way to do it. You can try this
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
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