在 react-router v4 中使用 React IndexRoute

Posted 2023-02-21

【中文标题】在 react-router v4 中使用 React IndexRoute

【英文标题】：Using React IndexRoute in react-router v4

【发布时间】：2017-08-02 14:08:36

【问题描述】：

我正在通过在线教程学习 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 个组件？

【参考方案1】：

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

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

【讨论】：

所以如果我不指定path 属性，它总是会被渲染？

我尝试了你的解决方案，但是其他 3 个组件不会被渲染。

那么，不需要<Route path="/" component=App> App 容器组件吗？

@Thequestioner 是的。你可以简单地添加你想要的内容，或者像包装任何其他组件一样包装路由。

我希望使用 IndexRoute 和路由包装器来获取 location.search 字符串，以便为查询参数创建上下文。现在使用 react router v4 我该怎么做？

【参考方案2】：

react-router & 不再有IndexRoute

<Route exact path="/" component=Home/> 等于 <IndexRoute component=Home/>

// Switch

<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://github.com/ReactTraining/react-router/issues/4732#issuecomment-317239220

https://reacttraining.com/react-router/web/api/Switch

【参考方案3】：

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

文件结构：

src

-index.js

-app(文件夹)

--组件（文件夹）

---Header.js

---Home.js

---Root.js

---用户.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;

【参考方案4】：

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

【讨论】：

这种使用 asterik 的行为与 react-router v3 而不是 v4 相关

【参考方案5】：

简单的解决方案

方法一：

<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