首次运行时渲染两个组件

Question

我正在开发一个包含四个组件的小型 React 应用程序：Main、Nav、Timer 和 Countdown。当我运行它时（打开一个新选项卡并加载应用程序，而不是刷新），我希望这个应用程序同时呈现 Main 和 Timer 组件，但该应用程序只呈现 Main 组件，我看到一个只有 Nav 组件的空白页面已被呈现.

我尝试使用 IndexRoute，但遇到了一个奇怪的错误，它对我不起作用。

这是我的代码：

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')
);

主要组件：

import React, {Component} from 'react';
import Nav from 'Nav';

class Main extends Component {

    render() {
        return (
            <Nav />
        );
    }
}

export default Main;

导航组件：

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;

其他两个组件只包含一个简单的文本元素。

Answer 1

IndexRoute 和 hashHistory 在 react-router-dom 中不可用。使用Switch 仅渲染第一个匹配的路由。然后，您可以在组件本身中拥有子路由。

另外，当你使用 Switch 时，最后要有 path="/" 的路由，否则它会在开始时匹配它并且不会渲染你的其他路由

您可以将时间组件配置为主组件的子组件，例如

import {BrowserRouter as Router, Route} from 'react-router-dom';
ReactDOM.render(
    <Router>
        <Switch>
            <Route path="/" component={Main} />
        </Switch>
    </Router>,
    document.getElementById('app')
);

然后在主组件中

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;