我是 React 的新手,我想开发一个单页应用程序,所以我使用了 react-router 四路由。
在 main.js 下,我在其中指定路由
import React from 'react';
import {Router,Route} from 'react-router';
import {App} from './components/App';
import {Login} from './components/Login';
import {Home} from './components/Home';
import { history } from 'react-router';
React.render(
<Router history={history}>
<Route path="/" component={App}>
<Route path="home" component={Home}/>
<Route path="login" component={Login}/>
</Route>
</Router>,
document.getElementById('main')
);
然后是 App.js,如您所见,我想要一个固定的页眉和页脚,然后让页面内容根据路由动态变化。
import React from 'react';
import {Header} from './Header';
import {Footer} from './Footer';
export class App extends React.Component {
render() {
console.log(this.props.children);
return (<div>
<Header/>
<div className="page-content">
{this.props.children}
</div>
<Footer/>
</div>);
}
}
使用这段代码,一旦应用程序加载了路径(“/”),我需要点击链接主页来显示主页内容,但我想默认显示,一旦应用程序是第一个已加载。
我怎样才能做到这一点?
谢谢!!
最佳答案
我想你可能想使用 IndexRoute
描述 here在 React Router 文档中。
你的路由器看起来像这样:
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="login" component={Login}/>
</Route>
</Router>
关于javascript - 如何使用 React-Router 默认显示路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34163617/