Apply for Zend Framework Certification Training

ReactJs




  Steps to create router in reactJs
  npx create-react-app describe-router
  cd describe-router
  npm install react-router-dom
  Important Note
  In react-router-dom v6, "Switch" is replaced by routes "Routes".
 
  import { Switch, Route } from "react-router-dom";
  to
 
  import { Routes ,Route } from 'react-router-dom';
  You also need to update the Route declaration from
 
  <Route path="/" component={Home} />
  to
  <Route path='/' element={>} />
  In react-router-dom, you also do not need to use the exact in the Route declaration.
 
  app.js  
 
  import './App.css';
  import Home from './components/home';
  import Login from './components/login';
  import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
  function App() {
    return (
      <div className="App">
      <Router>
        <div>
            <h2> Welcome to react router Exampleh2>
            <ul>
              <li><Link to={'/'}>HomeLink>li>
              <li><Link to={'/login'}>LoginLink>li>
            ul>
            <hr/>
            <Routes>
              <Route exact path='/' element={>}>Route>
              <Route exact path='/login' element={>}>Route>
            Routes>
        div>
      Router>
    div>
   );
 }
 
  export default App;
 
  home.jsx  
 
  import React, { Component } from 'react';
  class Home extends Component{
      constructor(props){
          super(props);
          this.state = {
 
          }
      }
      render(){
          return(
              <div>
                  <h1>This is Home Component<h1>
              <div>
          )
      }
  }
  export default Home;  
 
  file 3
  login.jsx  
 
  import React from 'react'
  import { Component } from 'react';
  class Login extends Component{
      constructor(props){
          super(props);
          this.state={};
      }
      render(){
          return(
              <div>
                  <h1>Hi this is a Login page</h1>
              <div>
          )
      }
  }
  export default Login;

< create an home page or landing page in reactJs Last >



Ask a question



  • Question: 
    {{questionlistdata.blog_question_description}}
    • Answer:
      {{answer.blog_answer_description  }}
    Replay to Question

(+91)-9910699802
Become A Member     Become A Teacher
Back to Top