route react not indexroute doom does browserhistory javascript node.js reactjs react-router react-router-v4

javascript - not - Uso de React IndexRoute en reaction-router v4



react router doom (3)

reaccionar-enrutador y no IndexRoute más

<Route exact path="/" component={Home}/>

===

<IndexRoute component={Home}/>

https://github.com/ReactTraining/react-router/issues/4732#issuecomment-317239220

# Switch ```jsx <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> import { Switch, Route } from ''react-router'' <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch> /* there will only ever be one child here */ <Fade> <Switch> <Route/> <Route/> </Switch> </Fade> <Fade> <Route/> <Route/> </Fade> /* there will always be two children here, one might render null though, making transitions a bit more cumbersome to work out */ ``` https://reacttraining.com/react-router/web/api/Switch

Estoy aprendiendo a reaccionarme con un tutorial en línea.

Este es un ejemplo básico sobre el uso de React Router:

<Router history={browserHistory}> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="/home" component={Home}/> <Route path="/about" component={About}/> <Route path="/contact" component={Contact}/> </Route> </Router>

Con mi componente de aplicación:

class App extends React.Component { render() { return ( <div> <ul> <li><Link to="home">Home</Link></li> <li><Link to="about">About</Link></li> <li><Link to="contact">Contact</Link></li> </ul> {this.props.children} </div> ) } } export default App;

Sin embargo, tengo un problema cuando uso IndexRoute porque no muestra nada, entonces busco el módulo de reaccionar-enrutador-dom v4 en npm y no hay indexRoute adentro. En cambio, usa esto:

<Router> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> <hr/> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/contact" component={Contact}/> </div> </Router>

Entonces, ¿cómo puedo representar 2 componentes para 1 ruta?


No sé si esto ayuda, pero estos son los códigos que utilicé.

Estructura del archivo:

src

-index.js

-app (carpeta)

--componentes (carpeta)

--- Header.js

--- Home.js

--- Root.js

--- User.js

src / app / index.js

import React, {Component} from "react"; import { render } from "react-dom"; import { browserHistory} from "react-router"; import { BrowserRouter as Router, Route, IndexRoute} from "react-router-dom"; import Root from "./components/Root"; import Home from "./components/Home"; import User from "./components/User"; class App extends Component { render() { return ( <Router history={browserHistory}> <div> <Root> <Route exact path={"/"} component={Home} /> <Route path={"/user"} component={User} /> <Route path={"/home"} component={Home} /> </Root> </div> </Router> ) } } render (<App />, window.document.getElementById("app"));

src / app / components / Root.js

import React, {Component} from "react"; import { render } from "react-dom"; import Header from "./Header"; import Home from "./Home"; class Root extends Component{ render(){ let renderData; renderData = ( this.props.children ); return( <div> <div className="container"> <div className="row"> <div className="col-xs-10 col-xs-offset-1"> <Header/> </div> </div> <div className="row"> <div className="col-xs-10 col-xs-offset-1"> {renderData} </div> </div> </div> </div> ); } } export default Root;

src / app / components / Home.js

import React, {Component} from "react"; class Home extends Component{ render(){ return( <div> <p>{this.props.isExist}</p> <h2>Home</h2> </div> ); } } export default Home;

src / app / components / User.js

import React, {Component} from "react"; class User extends Component{ render(){ return( <div> <h3>The user page</h3> <p>User ID:</p> </div> ); } } export default User;

webpack.config.js

var webpack = require("webpack"); var path = require("path"); var DIST_DIR = path.resolve(__dirname, "dist"); var SRC_DIR = path.resolve(__dirname, "src"); var config = { entry: SRC_DIR + "/app/index.js", output: { path: DIST_DIR + "/app", filename: "bundle.js", publicPath: "/app/" }, module:{ loaders: [ { test: //.js?/, include: SRC_DIR, loader: "babel-loader", query:{ presets: ["react", "es2015", "stage-2"] } } ] } }; module.exports = config;


ACTUALIZACIÓN react-router-4 ha cambiado en el sentido de que ya no tiene hijos. Sin embargo, con el componente Route puede representar todo lo que coincida con la ruta.

<Router> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> <hr/> // All 3 components below would be rendered when in a homepage <Route exact path="/" component={Home}/> <Route exact path="/" component={About}/> <Route exact path="/" component={Contact}/> <Route path="/about" component={About}/> <Route path="/contact" component={Contact}/> </div> </Router>

Vea este bin para experimentar con él https://www.webpackbin.com/bins/-Kf5cpLcax4dttAEvkCW .

Esto significa que si quieres un contenedor, puedes escribirlo dentro del componente.