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

react router doom

Question

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?

Answer 1

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

Answer 2

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;

Answer 3

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.