react js link page code example

Example 1: 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 (
      	<BrowserRouter>
        	<Switch>
        		<Route path="/">
        			<Home />
        		</Route>
        		<Route path="/something">
        			<Something />
        		</Route>
        		<Route path="/somethingelse">
        			<SomethingElse />
        		</Route>
        	</Switch>
        	<SomeComponentOrElement>
        		<Link to="/">Home</Link>
        		<Link to="/something">Something</Link>
        		<Link to="/somethingelse">Something Else</Link>
        	</SomeComponentOrElement>
        </BrowserRouter>
      )
    }
}

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

Example 2: how to add links in react js

import React from 'react';
import { Link } from 'react-router';

class List extends React.Component {
    render() {
        return (
            <div>
                <p>Please choose a repository from the list below.</p>
                <ul>
                    <li><Link to="/react">React</Link></li>
                </ul>
            </div>
        );
    }
}

export default List;

Example 3: react link to another page

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

classAppextendsComponent {
    render() {
        return (
            <div class="container">
                <nav>
<Link to="/">Home</Link>
<Link to="/dashboard">Dashboard</Link>
                </nav>
                <Route
                    path="/"
                    component={HomeComponent}
                    exact 
                />
                <Route
                    path="/dashboard"
                    component={DashboardComponent} 
                />
            </div>
        );
    }
}

Example 4: link in react

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>