Javascript 在 react-router v4 中使用 React IndexRoute
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42748727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using React IndexRoute in react-router v4
提问by Quoc-Hao Tran
I'm learning React myself with online tutorial.
我正在通过在线教程学习 React。
So this is a basic example about using React Router:
所以这是一个关于使用 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>
With my App component:
使用我的 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;
However, I have problem when using IndexRoute because it shows nothing, so I search for the module of react-router-dom v4 on npm and there is no IndexRoute inside. Instead it uses this:
但是，我在使用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>
So how can I render 2 component for 1 path ?
那么如何为 1 个路径渲染 2 个组件？
回答by Deividas Karzinauskas
UPDATEreact-router-4has changed in that it no longer has children. However, with the Routecomponent you can render anything that matches the path.
UPDATEreact-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>
See this bin to experiment with it https://www.webpackbin.com/bins/-Kf5cpLcax4dttAEvkCW.
请参阅此 bin 以对其进行实验https://www.webpackbin.com/bins/-Kf5cpLcax4dttAEvkCW。
This means that if you want a wrapper, you can write it inside the component.
这意味着如果你想要一个包装器，你可以将它写在组件中。
回答by xgqfrms
react-router & no IndexRouteany more
反应路由器 & 没有IndexRoute了
<Route exact path="/" component={Home}/>
<Route exact path="/" component={Home}/>
===
===
<IndexRoute component={Home}/>
<IndexRoute component={Home}/>
https://github.com/ReactTraining/react-router/issues/4732#issuecomment-317239220
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回答by Martin Lloyd Jose
I don't know if this helps but these are the codes that I used.
我不知道这是否有帮助，但这些是我使用的代码。
File Structure:
文件结构：
src
源文件
-index.js
-index.js
-app(folder)
-应用程序（文件夹）
--components(folder)
--组件（文件夹）
---Header.js
---Header.js
---Home.js
---Home.js
---Root.js
---根.js
---User.js
---用户.js
src/app/index.js
源代码/应用程序/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
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
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
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
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;
回答by Bruno Souza
<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....
回答by Shashwat Gupta
Simple solution
简单的解决方案
method 1:
方法一：
<Route exact path="/" component={Home}/>
Note:-
<Route exact path="/" component={Home}/>
and <IndexRoute component={Home}/>
both can comapre as same*
method 2:
方法二：
npm install react-router@3 --save
