Question

我正在使用Frontend布局来渲染组件。它完美地渲染了主页，但是没有渲染其他组件。

这是索引文件

import React from "react";
import ReactDOM from "react-dom";

import { Router, Route, Switch } from 'react-router-dom'

import indexRoutes from "routes/index.jsx";

import { history } from './helper/history';
import store from "./redux/store/index";
import { Provider } from "react-redux";

ReactDOM.render(
    <Provider store={store}>
        <Router history={history} >
            <Switch>
              {indexRoutes.map((prop, key) => {
                return <Route exact={prop.exactPro}  path={prop.path} component={prop.component} key={key} />;
              })}
            </Switch>
        </Router>
    </Provider>,
  document.getElementById("root")
);

这是主页和登录页面的indexRoutes文件。

import Login from "components/FrontEnd/Login";
import Frontend from  "layouts/Frontend/Frontend.jsx";

var indexRoutes = [
    { path: "/", name: "Frontend", component: Frontend , exactPro:true},
    { path: "/login", name: "FrontendLogin", component: Login , exactPro:false
];

export default indexRoutes;

在此文件中，我定义了路线

import Home from "components/FrontEnd/Home";
import HowItWorks from "components/FrontEnd/HowItWorks";
import AboutUs from "components/FrontEnd/AboutUs";

const FrontEndRoutes = [
  {
    path          : "/",
    name          : "Home",
    component     : Home,
    showMenu      : true
  },
  {
    path          : "/How_It_Works",
    name          : "How it works",
    component     : HowItWorks,
    showMenu      : true
  },
  {
    path          : "/About_Us",
    name          : "About Us",
    component     : AboutUs,
    showMenu      : true
  }
];

export default FrontEndRoutes;

在此文件中，我在布局中渲染组件

import React, { Component } from "react";
import {  Switch, Redirect } from "react-router-dom";

import Header from "components/FrontEnd/Header/Header";
import Footer from "components/FrontEnd/Footer/Footer";
import Menu from "components/FrontEnd/Menu/Menu";

import FrontEndRoutes from "routes/FrontEndRoutes.jsx";

import {  FrontEndAuthRoute } from 'helper/PrivateRouteFrontEnd';
import { history } from 'helper/history';

class Frontend extends Component {
  constructor(props) {
    super(props);
  }
  render() {

    return (
      <div className="wrapper">

        <Header {...this.props} />
        <div id="main-panel" className="main-panel" ref="mainPanel">
          <Menu {...this.props} />

          <Switch>
            {
              FrontEndRoutes.map((prop, key) => {
                if (prop.redirect){
                  return <Redirect from={prop.path} to={prop.to} key={key} test="haha" />;
                }

                return (
                  <FrontEndAuthRoute  exact path={prop.path}  component={prop.component} key={key}  />
                );
              })
            }
          </Switch>
          <Footer />
        </div>
      </div>
    );
  }
}


export default Frontend;

在此文件中，我检查是否应重定向到主页或登录页面

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export const FrontEndAuthRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props, matchProps) => (
        localStorage.getItem('music-director') 
        ? <Component {...props} {...matchProps} /> 
        : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

请建议我在哪里做错了

为什么组件无法使用React Router在父布局中呈现？

0 个答案: