Verwenden Sie React IndexRoute in react-router v4

Lerne ich Reagieren, mich mit online-tutorial.

So ist dies ein einfaches Beispiel zur Verwendung Reagieren-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>

Mit meiner App-Komponente:

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;

Allerdings habe ich problem bei der Verwendung von IndexRoute, denn es zeigt nichts, also Suche ich für das Modul reagieren-router-dom-v4 auf npm und es gibt keine IndexRoute innen.
Stattdessen verwendet Sie diese:

<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>

Also, wie kann ich render-2-Komponente für die 1 Weg ?

InformationsquelleAutor der Frage Quoc-Hao Tran | 2017-03-12

UPDATE
react-router-4 hat sich dahingehend verändert, dass es nicht mehr Kinder hat. Jedoch, mit der Route Komponente, die Sie machen können Sie nichts, passt den Pfad an.

<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>

Sehen dieses bin damit zu Experimentieren https://www.webpackbin.com/bins/-Kf5cpLcax4dttAEvkCW.

Dies bedeutet, dass, wenn Sie möchten, eine wrapper, Sie können schreiben Sie es in der Komponente.

InformationsquelleAutor der Antwort Deividas Karžinauskas

Ich weiß nicht, ob das hilft, aber dies sind die codes, die ich verwendet.

Datei-Struktur:

src

-index.js

-app(Ordner)

--Komponenten(Ordner)

---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;

InformationsquelleAutor der Antwort Martin Lloyd Jose

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.