首页 文章

在react-router v4中使用React IndexRoute

提问于
浏览
41

我正在学习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>

使用我的App组件:

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上搜索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>

那么如何为1条路径渲染2个组件呢?

4 回答

  • 62

    UPDATE react-router-4 已经改变,因为它不再有孩子了 . 但是,使用 Route 组件,您可以渲染与路径匹配的任何内容 .

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

    请参阅此bin以试验它https://www.webpackbin.com/bins/-Kf5cpLcax4dttAEvkCW .

    这意味着如果你想要一个包装器,你可以在组件内部编写它 .

  • 9

    react-router&没有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

  • 1

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

    文件结构:

    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;
    
  • 2
    <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....
    

相关问题