Question

我是React的新手，使用react@16.0.0和react-router-dom@4.2.2。

我在每个页面都显示一个页脚。我想在除主页之外的每个页面上显示标题，但我不知道从哪里开始。

我当前的app.jsx如下所示：

export default class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Router>
                <div>
                    <Route exact path="/" component={HomePage} />
                    <Route exact path="/download" component={DownloadPage} />
                    <Footer />
                </div>
            </Router>
        );
    }

}

Answer 1

React Router将呈现与给定路径匹配的所有路由，因为您没有使用交换机。因此，提供路线和传递渲染就很简单了。

e.g。

<Route path="/" render={ ( props ) => ( props.location.pathname !== "/") && <Header /> }>

替换props.location.pathname检查它所在的位置＆＃39; /＆＃39;无论你想要什么（例如/ home），它都不会为该路线渲染组件。

render() {
    return (
        <Router>
            <div>
                <Route path="/" render={ ( props ) => ( props.location.pathname !== "/") && <Header /> }>
                <Route exact path="/" component={HomePage} />
                <Route exact path="/download" component={DownloadPage} />
                <Footer />
            </div>
        </Router>
    );
}

在React和React Router中，如何在除主页之外的每个页面上显示标题

1 个答案: