在react-router v4中使用React IndexRoute

我正在使用在线教程学习React。

所以这是使用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> 

与我的应用程序组件:

 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; 

但是,我使用IndexRoute时遇到了问题,因为它没有显示任何内容,所以我在npm上searchreact-router-dom v4的模块,里面没有IndexRoute。 相反,它使用这个:

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

那么我怎样才能渲染2路组件?

更新 react-router-4已经改变,它不再有孩子。 但是,使用Route组件,您可以呈现与path匹配的任何内容。

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

看到这个斌试验它https://www.webpackbin.com/bins/-Kf5cpLcax4dttAEvkCW

这意味着如果你想要一个包装器,你可以把它写在组件里面。

react-router&no IndexRoute

<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 

我不知道这是否有帮助,但这些是我使用的代码。

文件结构:

SRC

-index.js

-app(文件夹)

–components(文件夹)

— Header.js

— Home.js

— Root.js

— user.js的

SRC /应用程序/ 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 /应用/组件/ 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 /应用/组件/ 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 /应用/组件/ 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;