how to use link in react router 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 in react
<Link
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>
Example 4: react router link
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Switch,
useLocation
} from "react-router-dom";
function usePageViews() {
let location = useLocation();
React.useEffect(() => {
ga.send(["pageview", location.pathname]);
}, [location]);
}
function App() {
usePageViews();
return <Switch>...</Switch>;
}
ReactDOM.render(
<Router>
<App />
</Router>,
node
);
Example 5: react router link
import React from "react";
import ReactDOM from "react-dom";
import { Router } from "react-router";
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
ReactDOM.render(
<Router history={history}>
<App />
</Router>,
node
);
Example 6: react router link
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
const customHistory = createBrowserHistory();
ReactDOM.render(<Router history={customHistory} />, node);