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

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 将渲染与给定路径匹配的所有路由，因为您没有使用交换机。因此，提供一条路线并将渲染传递给它就很简单了。

例如

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

将 props.location.pathname 检查中包含“/”的地方替换为您想要的任何内容(例如/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>
    );
}