Question

我刚开始学习React，我正在尝试创建一个SPA博客，它有一个全球定位的固定标题。

<Router><myHeader/><otherRoutes/></Router>

所以，每条路线都有相同的标题，从我的角度背景来看，我会在ui-view之外使用标题。

最好在每个单独的页面组件中导入标题组件，还是可以在class Routes extends React.Component { render() { return ( <Router history={browserHistory}> <IndexRoute component={Home} /> <Route path="/studio" component={Studio} /> <Route path="/work" component={Work} /> <Route path="*" component={Home} /> </Router> ) } }上添加标题组件？

更新

我在考虑使用这样的东西：

路由组件，我在其中定义路线：

import Routes from './components/Routes';

render((
   <div>
      <div className="header">header</div>
      <Routes />
   </div>
), document.getElementById('app'));

然后在主要的Index.js文件中，我想渲染类似：

% Generating random points
NP = 30; % number of points
x = randi([0 10],1,NP);
y = randi([0 10],1,NP);
P = [x;y]; % group the points as columns in a matrix

有人可以解释一下吗？谢谢！

Answer 1

根据我的经验，为页面定义布局组件可能会很好，例如......

布局组件

render() {
    return(
       <div>
          <Header />
             { this.props.children }
             /* anything else you want to appear on every page that uses this layout */
          <Footer />
       </div>
    );
}

然后将布局导入每个页面组件......

联系页面组件

render() {
    return (
        <Layout>
           <ContactComponent />
           /* put all you want on this page within the layout component */
        </Layout>
    );
}

您可以保持路由相同，您的路线将呈现联系页面，然后呈现您的标题。

通过这种方式，您可以控制多个页面上的重复内容，如果您需要一个或两个稍微不同的页面，您可以创建另一个布局并使用它。

Answer 2

我觉得这种方式很有用：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from "./components/Header";
import Home from "./components/Home";
import Dashboard from "./components/Dashboard";
import Footer from "./components/Footer";
class App extends Component {
  constructor() {
    super();
    this.state = {
      stuff: stuff;
    };
  }
render() {
 let { stuff } = this.state;
 return (
  <Router> //wrapper for your router, given alias from BrowserRouter
   <div className="App">
    <Header /> //this component will always be visible because it is outside of a specific Route
    <Route exact path="/" component={Home}/>  //at the root path, show this component
    <Route path="/dashboard" component={()=><Dashboard stuff={stuff} />}/>  //at the path '/dashboard', show this other component
    <Footer /> //this is also permanently mounted
   </div>
  </Router>
 );
 }
}
export default App;

贷方转到：David Kerr

Answer 3

这个问题已经回答了，但是我在这里展示另一种方法，并说为什么我更喜欢它。

我还认为拥有Layout组件是一件好事

function Layout (props) {
  return (
    <div>
      <Header/>
      <div className="content">
        {props.children}
      </div>
    </div>
  );
}

但是，除了将其渲染到每个路径组件中之外，您还可以将其作为路径的父代仅渲染一次。

return (
  <Router>
    <Layout>
      <Switch>
        <Route path="/about">
          <About/>
        </Route>
        <Route path="/contact">
          <Contact/>
        </Route>
        <Route path="/">
          <Home/>
        </Route>
      </Switch>
    </Layout>
  </Router>
);

这很好，因为在大多数情况下，您不会浪费时间在布局上，如果您有不同的布局，则只需要在布局组件中进行操作即可。

Answer 4

用于强制刷新路由内的 Header。使用 forceRefresh={true}

const Routing = () => {
        return(
            <BrowserRouter forceRefresh={true}>
            <Header/>
            <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/list/:id" component={ListingApi}/>
                    <Route path="/details/:id" component={HotelDetails}/>
                    <Route path="/booking/:hotel_name" component={PlaceBooking}/>
                    <Route path="/viewBooking" component={ViewBooking}/>
                    <Route exact path="/login" component={LoginComponent}/>
                    <Route  path="/signup" component={RegisterComponent}/>
            </Switch>
            <Footer/>
            </BrowserRouter>
        )
    }

反应路由器全局标头

4 个答案: