Javascript 在React路由器v4中使用React IndexRoute

我正在学习如何通过在线教程做出反应

这是一个使用React路由器的基本示例：

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

类应用程序扩展了React.Component{
render（）{
返回(

家
关于
接触

{this.props.children}
)
}
}
导出默认应用程序；

但是，我在使用IndexRoute时遇到问题，因为它没有显示任何内容，所以我在npm上搜索react 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>

家
关于
接触

那么如何为一条路径渲染两个组件呢？

更新

react-router-4

已更改，不再具有子级。但是，使用

路由

组件，您可以渲染与路径匹配的任何内容

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

家
关于
接触


//在主页中，将呈现以下所有3个组件

这意味着，如果您想要一个包装器，您可以将其写入组件中。

react router&no

IndexRoute

等于

//开关
从“反应路由器”导入{交换机，路由}
/*这里永远只有一个孩子*/
/*这里总是会有两个子项，其中一个子项可能会呈现null，这使得转换的计算更加繁琐*/

裁判

---

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

文件结构：

src

-index.js

-应用程序（文件夹）

--组件（文件夹）

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

请试试这个。。。。

简单解

方法1:

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


Note:-

<Route exact path="/" component={Home}/> 
and  <IndexRoute component={Home}/>
 both can comapre as same*

npm install react-router@3 --save

---

因此，如果我不指定

路径

属性，它将始终被呈现？我尝试了你的解决方案，但是其他3个组件不会被呈现。那么，不需要

应用程序容器组件了吗？@提问者是的。您可以简单地添加所需内容，或者像包装任何其他组件一样包装路由。我希望使用IndexRoute和路由包装器来获取

位置。搜索
字符串，以便为查询参数创建上下文。现在使用react router v4，我该如何做到这一点？使用asterik的这种行为与react router v3而不是v4相关
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;

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;

    <Router history={browserHistory}>
        <div>
            <Root>
                <Redirect from="*" to="/home"/>
                <Route path="/home" component={Home}/>    
                <Route path={"/user"} component={User} />    
                <Route path={"/home"} component={Home} />
            </Root>
        </div>
    </Router>  try Please try this....

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


Note:-

<Route exact path="/" component={Home}/> 
and  <IndexRoute component={Home}/>
 both can comapre as same*

npm install react-router@3 --save