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