link react router dom

1import React, { Component } from 'react';
2import { render } from 'react-dom';
3import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
4import { Home } from 'wherever-you-put-it/home.component.jsx';
5import { Something } from 'wherever-you-put-it/something.component.jsx';
6import { SomethingElse } from 'wherever-you-put-it/something-else.component.jsx';
7
8class App extends Component {
9	render() {
10      return (
11      	<BrowserRouter>
12        	<Switch>
13        		<Route path="/">
14        			<Home />
15        		</Route>
16        		<Route path="/something">
17        			<Something />
18        		</Route>
19        		<Route path="/somethingelse">
20        			<SomethingElse />
21        		</Route>
22        	</Switch>
23        	<SomeComponentOrElement>
24        		<Link to="/">Home</Link>
25        		<Link to="/something">Something</Link>
26        		<Link to="/somethingelse">Something Else</Link>
27        	</SomeComponentOrElement>
28        </BrowserRouter>
29      )
30    }
31}
32
33render(<App />, document.getElementById('app'));

1import React from "react";
2import ReactDOM from "react-dom";
3import {
4  BrowserRouter as Router,
5  Switch,
6  useLocation
7} from "react-router-dom";
8
9function usePageViews() {
10  let location = useLocation();
11  React.useEffect(() => {
12    ga.send(["pageview", location.pathname]);
13  }, [location]);
14}
15
16function App() {
17  usePageViews();
18  return <Switch>...</Switch>;
19}
20
21ReactDOM.render(
22  <Router>
23    <App />
24  </Router>,
25  node
26);
27

1<Link
2  to={{
3    pathname: "/courses",
4    search: "?sort=name",
5    hash: "#the-hash",
6    state: { fromDashboard: true }
7  }}
8/>

1<Link
2  to={{
3    pathname: "/courses",
4    search: "?sort=name",
5    hash: "#https://api.alat.ng/RegistrationApi/index.html",
6    state: { fromDashboard: true }
7  }}
8/>
9

1<Link to={`/users/${user.id}`} activeClassName="active">{user.name}</Link>
2// becomes one of these depending on your History and if the route is
3// active
4<a href="/users/123" class="active">Michael</a>
5<a href="#/users/123">Michael</a>
6
7// change the activeClassName
8<Link to={`/users/${user.id}`} activeClassName="current">{user.name}</Link>
9
10// change style when link is active
11<Link to="/users" style={{color: 'white'}} activeStyle={{color: 'red'}}>Users</Link>
12

1import React from "react";
2import ReactDOM from "react-dom";
3import { Router } from "react-router";
4import { createBrowserHistory } from "history";
5
6const history = createBrowserHistory();
7
8ReactDOM.render(
9  <Router history={history}>
10    <App />
11  </Router>,
12  node
13);
14