Prefacio

Esta respuesta utiliza el enfoque de enrutamiento dinámico adoptado en react-router v4+. Otras respuestas pueden hacer referencia al enfoque de "enrutamiento estático" utilizado anteriormente que ha sido abandonado por react-router .

Solución

react-router es una gran solución. Usted crea sus páginas como Componentes y el enrutador intercambia las páginas de acuerdo con la URL actual. En otras palabras, reemplaza dinámicamente su página original con su nueva página en lugar de pedirle al servidor una nueva página.

Para las aplicaciones web, te recomiendo que leas estas dos cosas primero:

• Tutorial completo
• Los documentos del enrutador de reacción ; le ayudará a comprender mejor cómo funciona el enrutador.

Resumen del enfoque general:

1 - Agregue react-router-dom a su proyecto:

Hilo

 yarn add react-router-dom

o MNP

 npm install react-router-dom

2 - Actualice su archivo index.js a algo como:

 import { BrowserRouter } from 'react-router-dom'; ReactDOM.render(( <BrowserRouter> <App /> {/* The various pages will be displayed by the `Main` component. */} </BrowserRouter> ), document.getElementById('root') );

3 - Cree un componente Main que mostrará sus páginas de acuerdo con la URL actual:

 import React from 'react'; import { Switch, Route } from 'react-router-dom'; import Home from '../pages/Home'; import Signup from '../pages/Signup'; const Main = () => { return ( <Switch> {/* The Switch decides which component to show based on the current URL.*/} <Route exact path='/' component={Home}></Route> <Route exact path='/signup' component={Signup}></Route> </Switch> ); } export default Main;

4 - Agregue el componente Main dentro del archivo App.js :

 function App() { return ( <div className="App"> <Navbar /> <Main /> </div> ); }

5 - Agregue Link a sus páginas.

(Debe usar Link de react-router-dom en lugar de un simple <a> antiguo para que el enrutador funcione correctamente).

 import { Link } from "react-router-dom"; ... <Link to="/signup"> <button variant="outlined"> Sign up </button> </Link>

(¡Asegúrese de instalar el enrutador de reacción usando npm!)

Para usar react-router, haga lo siguiente:

1. Cree un archivo con rutas definidas usando los componentes Route, IndexRoute

2. Inyecte el componente Router (¡con 'r'!) como componente de nivel superior para su aplicación, pasando las rutas definidas en el archivo de rutas y un tipo de historial (hashHistory, browserHistory)

3. Agregue {this.props.children} para asegurarse de que las nuevas páginas se representen allí
4. Utilice el componente Enlace para cambiar de página

Paso 1 rutas.js

 import React from 'react'; import { Route, IndexRoute } from 'react-router'; /** * Import all page components here */ import App from './components/App'; import MainPage from './components/MainPage'; import SomePage from './components/SomePage'; import SomeOtherPage from './components/SomeOtherPage'; /** * All routes go here. * Don't forget to import the components above after adding new route. */ export default ( <Route path="/" component={App}> <IndexRoute component={MainPage} /> <Route path="/some/where" component={SomePage} /> <Route path="/some/otherpage" component={SomeOtherPage} /> </Route> );

Punto de entrada del paso 2 (donde realiza la inyección de DOM)

 // You can choose your kind of history here (eg browserHistory) import { Router, hashHistory as history } from 'react-router'; // Your routes.js file import routes from './routes'; ReactDOM.render( <Router routes={routes} history={history} />, document.getElementById('your-app') );

Paso 3 El componente de la aplicación (props.children)

En el renderizado de su componente de aplicación, agregue {this.props.children}:

 render() { return ( <div> <header> This is my website! </header> <main> {this.props.children} </main> <footer> Your copyright message </footer> </div> ); }

Paso 4 Usar enlace para navegar

En cualquier parte del valor JSX de retorno de la función de representación de su componente, use el componente Link:

 import { Link } from 'react-router'; (...) <Link to="/some/where">Click me</Link>

Esta es una pregunta amplia y hay varias formas de lograrlo. En mi experiencia, he visto muchas aplicaciones de una sola página que tienen un archivo de punto de entrada como index.js . Este archivo sería responsable de "arrancar" la aplicación y será su punto de entrada para el paquete web.

index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import Application from './components/Application'; const root = document.getElementById('someElementIdHere'); ReactDOM.render( <Application />, root, );

Su componente <Application /> contendría las siguientes partes de su aplicación. Has dicho que quieres páginas diferentes y eso me lleva a creer que estás usando algún tipo de enrutamiento. Eso podría incluirse en este componente junto con cualquier biblioteca que deba invocarse al iniciar la aplicación. me vienen a la mente react-router , redux , redux-saga , react-devtools . De esta manera, solo necesitará agregar un único punto de entrada en la configuración de su paquete web y todo se filtrará en cierto sentido.

Cuando haya configurado un enrutador, tendrá opciones para configurar un componente en una ruta coincidente específica. Si tenía una URL de /about , debe crear la ruta en cualquier paquete de enrutamiento que esté usando y crear un componente de About.js con la información que necesite.