Question

我正在开发一个带有四个组件的小型应用程序：Main，Nav，Timer和Countdown。当我运行它（打开一个新的选项卡并加载应用程序，而不是刷新）时，我希望这个应用程序同时渲染主要和计时器组件，但应用程序只渲染主组件，我看到一个只有导航组件的空白页面已被渲染

我尝试使用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仅渲染第一个匹配的Route。然后，您可以在组件本身中拥有子路由。

同样当你使用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;

首次运行时渲染两个组件

1 个答案: