react route code example

Example 1: react router dom

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    
      

        

        {/* A  looks through its children s and
            renders the first one that matches the current URL. */}
        
          
            
          
          
            
          
          
            
          
        
      
    
  );
}

function Home() {
  return 
Home
;
}

function About() {
  return 
About
;
}

function Users() {
  return 
Users
;
}

Example 2: link to react

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import { Home } from 'wherever-you-put-it/home.component.jsx';
import { Something } from 'wherever-you-put-it/something.component.jsx';
import { SomethingElse } from 'wherever-you-put-it/something-else.component.jsx';

class App extends Component {
	render() {
      return (
      	
        	
        		
        			
        		
        		
        			
        		
        		
        			
        		
        	
        	
        		Home
        		Something
        		Something Else
        	
        
      )
    }
}

render(, document.getElementById('app'));

Example 3: react router redirect

  {loggedIn ?  : }

Example 4: react router

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";

export default function App() {
  return (
    
      

        

          

            Home
          
          

            About
          
          

            Topics
          
        

        
          
            
          
          
            
          
          
            
          
        
      
    
  );
}

function Home() {
  return 
Home
;
}

function About() {
  return 
About
;
}

function Topics() {
  let match = useRouteMatch();

  return (
    

      
Topics

      

        

          Components
        
        

          
            Props v. State
          
        
      

      {/* The Topics page has its own  with more routes
          that build on the /topics URL path. You can think of the
          2nd  here as an "index" page for all topics, or
          the page that is shown when no topic is selected */}
      
        
          
        
        
          
Please select a topic.
        
      
    
  );
}

function Topic() {
  let { topicId } = useParams();
  return 
Requested topic ID: {topicId}
;
}

Example 5: install react router

$ npm install --save react-router

Example 6: react route

npm install react-router-dom