Question

我想创建一个Route Group来使用第一个Component验证每个路由。但这可能是不可能的。因为React只读取了第一组，我也尝试使用React.Fragment，但同样的事情发生了

我创建了一组路线：

import React from 'react';
import {Route} from 'react-router-dom';
import _ from 'lodash';

export const PathGroup = (pathGroup, sadas) => {
    const Template = pathGroup.template;

    return (
        { _.map(pathGroup.children, (pathRoute, key) => {
            const { component, path, exact, ...another } = pathRoute.props;
            return (
                <Route
                    exact
                    path={path}
                    key={key}
                    render={ (route) => <Template
                        component={component}
                        route={route}
                        {...another}
                    />}
                />
            )
        }) }
    );
};

export const Path = (path) => {
    return <React.Fragment/>
};

以这种方式按组打印路线：

render() {
    const user = this.props.user;
    if (!user.verified) { return(<div>Loading...</div>); }
    return (
        <BrowserRouter>
            <Switch>
                <PathGroup template={PublicLayout} >
                    <Path exact path='/contact' component={Contact}  user={user}/>
                    <Path exact path='/' component={Home}  user={user} />
                </PathGroup>
                <PathGroup template={PrivateLayout} verify={this.props.user.logged}  redirectFalse="/projects" >
                    <Path exact path='/profile' component={Profile}  user={user} />
                    <Path exact path='/posts' component={Posts}  user={user} />
                    <Path exact path='/posts/:idPost' component={Post}  user={user} />
                </PathGroup>
                <PathGroup template={Login} verify={this.props.user.logged} redirectTrue="/projects"  >
                    <Path exact path='/login' component={Login} />
                </PathGroup>
                <Route component={ NotFound } />
            </Switch>
        </BrowserRouter>
    );
}

但是当我运行应用程序时，它只显示第一组

我也尝试使用React.Fragment，但发生的情况相同。

Answer 1

我不知道这是否是您想要的答案，但如果您想为每个基座route设置一个后备页面，最简单的方法是使用嵌套的switch。

import React, { Component } from "react";
import { render } from "react-dom";
import { Route, Switch, BrowserRouter } from "react-router-dom";

const Home = props => (
  <div>
    <Switch>
      <Route path={props.match.url + "/1"} exact render={() => <h1>Home 1</h1>} />
      <Route path={props.match.url + "/2"} exact render={() => <h1>Home 2</h1>} />
      <Route render={() => <h1>Home 404</h1>} />
    </Switch>
  </div>
);

const Post = props => (
  <div>
    <Switch>
      <Route path={props.match.url + "/1"} exact render={() => <h1>Post 1</h1>} />
      <Route path={props.match.url + "/2"} exact render={() => <h1>Post 2</h1>} />
      <Route render={() => <h1>Post 404</h1>} />
    </Switch>
  </div>
);

class App extends Component {
  render() {
    return (
      <BrowserRouter>
      <div>
        <Switch>
          <Route path="/home" component={Home} />
          <Route path="/post" component={Post} />
          <Route render={() => <h1>404</h1>} />
        </Switch>
      </div>
      </BrowserRouter>
    );
  }
}

可以在每个根路由组件中完成身份验证，然后重定向到登录页面。
也可以使用查询参数，因此相同的路径可以处理多个ID。

例如：<Route path={this.props.match.url + '/:id'} exact component={Post} />然后，在Post组件中，使用const { id } = this.props.match.params获取ID。

有CodeSandbox demo。

React Router v4 Group of Router

1 个答案: