npm install --save react-router-dom
		

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import Home from "./Home.js";
import About from "./About.js";
import Contact from "./Contact.js";

class App extends React.Component {
   render() {
      return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contacts">Contact</Link></li>
          </ul>
        </nav>

	{/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about"><About /></Route>
          <Route path="/contacts"><Contact /></Route>
          <Route path="/"><Home /></Route>
        </Switch>
      </div>
    </Router>
  )
   }
}

ReactDOM.render(<App />, document.getElementById('root'));
		

//About.js
import React from 'react';

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}
export default About;
		

//contact.js
import React from 'react';

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}
export default Contact;
		

//Home.js
import React from 'react';

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}
export default Home;
		

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Switch, Route, Link, useParams} from "react-router-dom";
import Home from "./Home.js";
import About from "./About.js";
import Topics from "./Topics.js";

class App extends React.Component {
   render() {
      return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/topics">Topics</Link></li>
          </ul>
        </nav>

	{/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
	      {/* Add Home at the end */}
        <Switch>
	      <Route path = "/about"><About /></Route>
	      <Route path = "/topics"><Topics /></Route>
	      <Route path = "/"><Home /></Route>
        </Switch>
      </div>
    </Router>
  )
   }
}

ReactDOM.render(<App />, document.getElementById('root'));
		

//Home.js
import React from 'react';

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}
export default Home;
		

//About.js
import React from 'react';

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}
export default About;
		

//Topics.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";
import Component from "./Component.js"
import Props from "./Props.js"

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

  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>
            Props v. State
          </Link>
        </li>
      </ul>

      {/* The Topics page has its own <Switch> with more routes
          that build on the /topics URL path. You can think of the
          2nd <Route> here as an "index" page for all topics, or
          the page that is shown when no topic is selected */}
      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={match.path}>
          <h3>Please select a topic.</h3>
        </Route>
      </Switch>
    </div>
  );
}

export default Topics;

function Topic() {
  let { topicId } = useParams();
  console.log(topicId);
  let current;
  if (topicId == "components")
		current = <Component />;
  else if (topicId = "props-v-stat")
		current = <Props />;
  else
		current = <span>Wrong Info ...</span>;
  return (
	  <div>
	  	<h3>Requested topic ID: {topicId}</h3>
	  	{current}
  	  </div>
  );
}
		

//Component.js
import React from 'react';

class Component extends React.Component {
   render() {
      return (
         <div>
            <h1>Component...</h1>
         </div>
      )
   }
}
export default Component;
		

import React from 'react';

class Props extends React.Component {
   render() {
      return (
         <div>
            <h1>Props...</h1>
         </div>
      )
   }
}
export default Props;
		

ReactTraining