如何在本地路由中正确设置react-router-dom？

Question

我有这个 index.js ：

Get-Help -Name Get-NetIPConfiguration -Examples
Get-Help -Name Get-NetAdapter -Examples
Get-Help -Name Get-NetIPAddress -Examples
Get-Help -Name Get-NetIPInterface -Examples

此 App.js ：

Get-Help -Name Test-NetConnection -Examples

和 Home.js ：

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

我希望在<Switch> <Route exact path="/" component={Home} /> <Route path="/login" render={() => <Login userError={this.state.userError} />} /> <Route path="/registration" component={Registration} />; </Switch> 块内呈现 Friends 组件，但是现在如果我尝试通过<div className="Home"> <Header/> <div className="content"> <Sidenav/> <Switch> <Route path="/friends" component={Friends}/> </Switch> <Feed/> </div> </div> 到达content路线，我将得到空白页。如果我在 App.js 中设置了/friends路由，就可以了，但是我不会在Link类中使用它，因为它将是另一个页面。

你能帮我吗？

在功能上，我将在/friends中显示更多项目，这就是为什么我将content放在content

谢谢！

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

您可以访问演示 here

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

- 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);

页面/具有基础

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>
      );
    }
}

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组件内。我看不到内容组件应位于“朋友”组件之外的原因。您可以在需要它的任何组件中声明内容组件。内容组件不必弄乱路由实现