如何在 Home Route 中正确设置 react-router-dom？

Question

我有这个index.js ：

<Provider store={store}>
  <Router history={history}>
    <App/>
  </Router>
</Provider>

这个App.js ：

<Switch>
  <Route exact path="/" component={Home} />
    <Route
      path="/login"
      render={() => <Login userError={this.state.userError} />}
    />
  <Route path="/registration" component={Registration} />;
</Switch>

和Home.js ：

<div className="Home">
  <Header/>
  <div className="content">
    <Sidenav/>
      <Switch>
        <Route path="/friends" component={Friends}/>
      </Switch>
    <Feed/>
  </div>
</div>

我希望Friends组件在content块内呈现，但是现在如果我尝试通过Link到达/friends路线，我会得到空白页面。 如果我在App.js 中设置/friends Route ，那就没问题了，但我的content类中不会有它，因为它将是另一个页面。

你能帮我处理一下吗？

同样在功能中，我将在content显示更多项目，这就是我将Switch放在Home.js中的Home.js

提前致谢！

Answer 1

移动您的content类和<Friends>

您遇到的问题是，部分Home当您访问不渲染/friends ，因为当你去只会渲染/

要解决这个问题，只需将Route移动到App.js文件中，并将content类移动到Friends组件中。

为了使这更容易，您可以将您的content类变成一个组件。 这样你就可以把它包裹在你渲染的所有东西上。

---

或者移动<Friends>并包装content

我的意思是，您还可以创建自己的Route组件，将传递给它的任何组件包装在Content组件中。 它可能类似于：

const ContentRoute = ({ component, ...props }) => (
  <Route {...props} component={() => (
    <Content>
      <component />
    </Content>
  )}>
  </Route>
)

Answer 2

您可以在此处访问演示

这是我所做的。 这演示了如何在页面更改时设置布局。

- src/
-- components/
--- Header.js
--- Sidenav.js
-- pages/
--- Home.js
--- Login.js
--- withBase.js
-- App.js
-- BaseLayout.js
-- routes.js

首先，让我们制作虚拟组件。

组件/标题

import React from 'react';

export default () => (
  <div>
    This is Header.
  </div>
);

组件/Sidenav

import React from 'react';

export default () => (
  <div>
    This is Sidenav.
  </div>
);

然后，页面。

页数/首页

import React from 'react';
import { NavLink } from 'react-router-dom';
import withBase from './withBase';

const Home = () => (
  <div>
    <p>Welcome Home!!!</p>
    <NavLink to="/login">Go to login page</NavLink>
  </div>
);

export default withBase(Home);

页面/登录

import React from 'react';
import { NavLink } from 'react-router-dom';
import withBase from './withBase';

const Login = () => (
  <div>
    <p>You have to login here...</p>
    <NavLink to="/">Go home</NavLink>
  </div>
);

export default withBase(Login);

页数/withBase

import React from 'react';

export default WrappedComponent => (
  class extends React.Component {
    componentDidMount() {
      this.props.showHeaderSidenav();
    }

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

如您所见， withBase是一个HOC 。 它在页面安装时运行showHeaderSidenav 。

应用程序

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import BaseLayout from './BaseLayout';
import routes from './routes';

export default class extends React.Component {
    state = {
      withHeaderSidenav: true
    }

    showHeaderSidenav = (withHeaderSidenav = true) => {
      this.setState({ withHeaderSidenav });
    }

    render() {
      return (
        <BaseLayout withHeaderSidenav={this.state.withHeaderSidenav}>
          <Switch>
            {routes.map(route => (
              <Route
                exact
                key={route.path}
                path={route.path}
                render={() => (
                  <route.component
                    showHeaderSidenav={() => this.showHeaderSidenav(route.withHeaderSidenav)}
                  />
                )}
              />
            ))}
          </Switch>
        </BaseLayout>
      );
    }
}

基本布局

import React from 'react';
import Header from './components/Header';
import Sidenav from './components/Sidenav';

export default ({ withHeaderSidenav, children }) => (
  <div>
    {withHeaderSidenav && <Header />}
    <div className="content">
      {withHeaderSidenav && <Sidenav />}
      {children}
    </div>
  </div>
);

我们可以说BaseLayout就像一个包装器。 它包含将基于withHeaderSidenav道具显示的动态组件。

最后...

路线

import Home from './pages/Home';
import Login from './pages/Login';

export default [
  {
    path: '/',
    component: Home,
    withHeaderSidenav: true
  },
  {
    path: '/login',
    component: Login,
    withHeaderSidenav: false
  },
];

Answer 3

您可以在 Friends 组件中移动（声明）内容组件。 我不明白为什么内容组件应该存在于 Friends 组件之外。 您可以在任何需要它的组件中声明内容组件。内容组件不必与路由实现混淆