markdown 反应路由器 - 入门

Posted 2021-05-05

# Instalación
```powershell
npm install react-router react-router-dom
```

# Conceptos básicos
* Bajo el elemento ```Router``` puede existir un sólo hijo
* Los elemento ```Route``` y ```Link``` deben existir bajo el mismo nodo ```Router```.

```JSX
import React, { Component } from 'react';
import { browserHistory } from 'react-router';
import { BrowserRouter as Router } from 'react-router-dom';

import Links from "./Links";
import Routes from './Routes';

class FullPage extends Component {
    render() {
        return(
          <Router history={browserHistory}>
              <div>
                  <Links />
                  <Routes />
              </div>
          </Router>
    );
  }
}
export default FullPage;
``` 

```JSX
import React from 'react';
import { Link } from 'react-router-dom';

function Links(props) {
    return (
        <div>
            <Link to="/">Home</Link>
            <Link to="/page1">Page 1</Link>
        </div>
    );
};

export default Links;
```

* Dentro del elemento ```Switch```, se eligirá la primera condición que se cumpla en algún elemento ```Route``` y se renderizará el componente indicado
* También se puede devolver un código JSX

```jsx
import React, { Component } from 'react';
import { Route } from 'react-router'
import { Switch } from 'react-router-dom'

import HomePage from '../home';
import Page from '../page';

class Routes extends Component {
    render() {
        return(
            <Switch>
                <Route exact path="/" component={HomePage}/>
                <Route exact path="/page" component={Page} />
                <Route
                    render={() => (
                        <h1>Route Not Found</h1>
                    )} />
            </Switch>
        );
    }
}
export default Routes;
```