link component react 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: Link react router
<Link to="/about">About</Link>
Example 3: link rezct
<Link
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>
Example 4: link tag react
<Link to={`/users/${user.id}`} activeClassName="active">{user.name}</Link>
<a href="/users/123" class="active">Michael</a>
<a href="#/users/123">Michael</a>
<Link to={`/users/${user.id}`} activeClassName="current">{user.name}</Link>
<Link to="/users" style={{color: 'white'}} activeStyle={{color: 'red'}}>Users</Link>
Example 5: link in react
<Link
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>