react-router 抽离时，匹配不到路由？

Question

router/index.js:

import Activity from './activity'
import Others from './others'
export default class AppRouter extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Activity {...this.props}/>
          <Others/>
        </Switch>
      </BrowserRouter>
    )
  }
}

import {Route} from 'react-router-dom'
import Activity_haluo from '@/pages/activity/haluo/'

class activity extends React.Component{
  constructor(p){
    super(p)
  }
  render(){
    return (
      <span>
        <Route exact path={"/activity/haluo"} component={Activity_haluo} />
      </span>
    )
  }
}
export default activity

import {Route} from 'react-router-dom'
import Activity_haluo from '@/pages/activity/haluo/'

class activity extends React.Component{
  constructor(p){
    super(p)
  }
  render(){
    return (
      <span>
        <Route exact path={"/others/haluo"} component={Activity_haluo} />
      </span>
    )
  }
}
export default activity

Activity和Others只能匹配写在前面的路径
就是说，<Activity>写在<Others/>前面，就只能匹配<Activity>里的路径,
不知道是哪里配置有问题？

Answer 1

贴个创建Route的源代码，下面参数element就是Router的子元素。
可以看到这里只判断了Fragment,Redirect两种子元素类型。
但是兄弟你给Route包了span标签。
这里的element就是span元素。所以创建的路由不正确。
修改<span><Route /></span>为：
<><Route /></>即可正确解析。

let createRoute = basepath => element => {
  if (!element) {
    return null;
  }

  if (element.type === React.Fragment && element.props.children) {
    return React.Children.map(element.props.children, createRoute(basepath));
  }
  invariant(
    element.props.path || element.props.default || element.type === Redirect,
    `<Router>: Children of <Router> must have a \`path\` or \`default\` prop, or be a \`<Redirect>\`. None found on element type \`${
      element.type
    }\``
  );

  invariant(
    !(element.type === Redirect && (!element.props.from || !element.props.to)),
    `<Redirect from="${element.props.from}" to="${
      element.props.to
    }"/> requires both "from" and "to" props when inside a <Router>.`
  );

  invariant(
    !(
      element.type === Redirect &&
      !validateRedirect(element.props.from, element.props.to)
    ),
    `<Redirect from="${element.props.from} to="${
      element.props.to
    }"/> has mismatched dynamic segments, ensure both paths have the exact same dynamic segments.`
  );

  if (element.props.default) {
    return { value: element, default: true };
  }

  let elementPath =
    element.type === Redirect ? element.props.from : element.props.path;

  let path =
    elementPath === "/"
      ? basepath
      : `${stripSlashes(basepath)}/${stripSlashes(elementPath)}`;

  return {
    value: element,
    default: element.props.default,
    path: element.props.children ? `${stripSlashes(path)}/*` : path
  };
};