首次运行时渲染两个组件
[英] Render Two Components at First Run
本文介绍了首次运行时渲染两个组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个包含四个组件的小型 React 应用程序:Main、Nav、Timer 和 Countdown.当我运行它时(打开一个新选项卡并加载应用程序，而不是刷新)，我希望这个应用程序同时呈现 Main 和 Timer 组件，但该应用程序只呈现 Main 组件，我看到一个只有 Nav 组件的空白页面已呈现.
我尝试使用 IndexRoute，但出现了一个奇怪的错误，它对我不起作用.
这是我的代码:
从'react'导入React；从 'react-dom' 导入 ReactDOM；从react-router-dom"导入 {BrowserRouter 作为路由器、路由、索引路由、hashHistory}；从主"导入主；从计时器"导入计时器；从倒计时"导入倒计时；ReactDOM.render(<路由器历史={hashHistory}><div><Route path="/" component={Main}/><路由精确路径="/timer" component={Timer}/><Route path="/countdown" component={Countdown}/>
</路由器>,document.getElementById('app'));
主要组件:
import React, {Component} from 'react';从导航"导入导航；类 Main 扩展组件 {使成为() {返回 (<导航/>);}}导出默认主；
导航组件:
import React, {Component} from 'react';从 'react-router-dom' 导入 {NavLink}；类导航扩展组件{使成为() {返回 (<div className="top-bar"><div className="top-bar-left"><ul className="菜单"><li className="menu-text">React Timer</li><li><NavLink to="/timer" activeClassName="active-link" activeStyle={{fontWeight: 'bold'}}>Timer</NavLink></li><li><NavLink to="/countdown" activeClassName="active-link" activeStyle={{fontWeight: 'bold'}}>Countdown</NavLink></li>
<div className="top-bar-right"><ul className="菜单"><li className="menu-text">由 Milad Fattahi 创建</li>
);}}导出默认导航；
其他两个组件仅包含一个简单的文本元素.
解决方案
IndexRoute 和 hashHistory 在 react-router-dom 中不可用.使用 Switch 只渲染第一个匹配的路由.然后，您可以在组件本身中拥有子路由.
此外，当您使用 Switch 时，最后使用 path="/" 的路线，否则它将在开始时匹配它并且不会呈现您的其他路线
您可以将时间组件配置为 Main 组件的子组件，例如
import {BrowserRouter as Router, Route} from 'react-router-dom';ReactDOM.render(<路由器><开关><Route path="/" component={Main}/></开关></路由器>,document.getElementById('app'));
然后在主组件中
import React, {Component} from 'react';从导航"导入导航；从react-router-dom"导入 {Route, Redirect}类 Main 扩展组件 {使成为() {返回 (<div><导航/><重定向到=/计时器"/><路由精确路径="/timer" component={Timer}/><Route path="/countdown" component={Countdown}/>
);}}导出默认主；
I'm working on a small react app with four components: Main, Nav, Timer, and Countdown. When I run it (open a new tab and load the app, not refresh), I want this app to render Main and Timer components simultaneously, but the app only renders Main Component and I see a blank page with only Nav component has been rendered.
I tried using IndexRoute but I got a strange error and it didn't work for me.
Here's my code:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, IndexRoute, hashHistory} from 'react-router-dom';
import Main from 'Main';
import Timer from 'Timer';
import Countdown from 'Countdown';
ReactDOM.render(
<Router history={hashHistory}>
<div>
<Route path="/" component={Main} />
<Route exact path="/timer" component={Timer} />
<Route path="/countdown" component={Countdown} />
</div>
</Router>,
document.getElementById('app')
);
Main Component:
import React, {Component} from 'react';
import Nav from 'Nav';
class Main extends Component {
render() {
return (
<Nav />
);
}
}
export default Main;
Nav Component:
import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
class Nav extends Component {
render() {
return (
<div className="top-bar">
<div className="top-bar-left">
<ul className="menu">
<li className="menu-text">React Timer</li>
<li><NavLink to="/timer" activeClassName="active-link" activeStyle={{fontWeight: 'bold'}}>Timer</NavLink></li>
<li><NavLink to="/countdown" activeClassName="active-link" activeStyle={{fontWeight: 'bold'}}>Countdown</NavLink></li>
</ul>
</div>
<div className="top-bar-right">
<ul className="menu">
<li className="menu-text">Created by Milad Fattahi</li>
</ul>
</div>
</div>
);
}
}
export default Nav;
The other two components contain only a simple text element.
解决方案
IndexRoute and hashHistory are not available in react-router-dom. Make use of Switch to render only first matching Route. You can then have the Child Routes in the component itself.
Also when you use Switch , have the route with path="/" at last otherwise it will match it at the begining and will not render your other routes
You can configure your time component to be a child of the Main component like
import {BrowserRouter as Router, Route} from 'react-router-dom';
ReactDOM.render(
<Router>
<Switch>
<Route path="/" component={Main} />
</Switch>
</Router>,
document.getElementById('app')
);
Then in Main component
import React, {Component} from 'react';
import Nav from 'Nav';
import {Route, Redirect} from 'react-router-dom'
class Main extends Component {
render() {
return (
<div>
<Nav />
<Redirect to="/timer" />
<Route exact path="/timer" component={Timer} />
<Route path="/countdown" component={Countdown} />
</div>
);
}
}
export default Main;
这篇关于首次运行时渲染两个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
