[React Routing] #react #routing

gistfile1.txt

import React, { Component } from 'react';
import { render } from 'react-dom';
import { 
  BrowserRouter as Router, 
  Route,
  Switch,
  Link,
  Redirect
} from 'react-router-dom';

import Hello from './Components/Hello';
import Goodbye from './Components/Goodbye';
import './style.css';

class App extends Component {
  
  render() {
    return (

      <div>
      <Router>
      <div>
      <Link to="/hello">Hello</Link>{" --- "}
      <Link to="/goodbye">GoodBye</Link>{"-----"}
      <Link to="/">Home</Link>
        <Switch>

        <Route exact path="/" component= {() => {
          return <h1> Home! </h1>
        }} />

        // paramaterized route
          <Route exact path="/hello/:name" component={Hello} />
          <Route exact path="/goodbye" component={Goodbye} />

        </Switch>
        </div>
      </Router>
      </div>
    );
  }
}

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


###### in Hello.js
###### takes the parameter

({match}) => <p> Hello {match.params.name}!</p>

import { withRouter} from 'react-router-dom';

const Hello = ({ match, history )} => (

<button onClick={() => history.push("/"} > Go Home {match.params.name}

);

export default withRouter(Hello);