код APP:
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Main from "./routes/Main";
import About from "./routes/About";
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path='/' component={Main} />
<Route path='/about' component={About} />
</Switch>
</BrowserRouter>
);
};
export default App;
код main:
import { Link } from 'react-router-dom';
export default function Main() {
return (
<div>
<Link to="/about">Read about react-router-dom</Link>
<h2>React router</h2>
<p>Most modern React projects manage their dependencies using a package manager like npm or Yarn. To add React Router to an existing project, the first thing you should do is install the necessary dependencies with the tool of your choice</p>
</div>
);
};
код about:
import { Link } from 'react-router-dom';
export default function About() {
return (
<div>
<Link to="/">Back to main</Link>
<h4>LEARN ONCE, ROUTE ANYWHERE</h4>
<h2>REACT ROUTER</h2>
<p>Components are the heart of React's powerful, declarative programming model. React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering--so take your pick!</p>
</div>
);
};
в браузере переходы работают