Question

在嵌套在未命中的匹配之间转换时出现问题。以下是一个最小的例子。重现/ adapters和/ users之间的行为转换。根据您开始的位置，其中一个将无法渲染。但是，日志始终显示在控制台中。

我没有正确使用Miss，还是这个bug？

codepen ：http://codepen.io/slightlytyler/pen/wgzbRE

Root.js

import React from 'react';
import { BrowserRouter, Link, Match, Miss } from 'react-router';

const Root = () => (
  <BrowserRouter>
    <div>
      <Link to="/auth">Auth</Link>
      <Link to="/adapters">Adapters</Link>
      <Link to="/users">Users</Link>
      <Match
        pattern="/auth"
        render={() => <div>auth</div>}
      />
      <Miss
        render={() => (
          <div className="app-layout">
            App Layout
            <Match
              pattern="/adapters"
              render={() => {
                console.log('render adapters');
                return <div>Adapters</div>;
              }}
            />
            <Match
              pattern="/users"
              render={() => {
                console.log('render users');
                return <div>Users</div>;
              }}
            />
          </div>
        )}
      />
    </div>
  </BrowserRouter>
);

export default Root;

Answer 1

好的答案是react-router v4.0.0-alpha.6被破坏了。我已经切换到使用master和新API，并使我的代码按预期工作。以下是我完成问题的方法。

<强> Root.js

import React from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router';

const Root = () => (
  <BrowserRouter>
    <div>
      <Link to="/auth">Auth</Link>
      <Link to="/adapters">Adapters</Link>
      <Link to="/users">Users</Link>
      <Switch>
        <Route
          path="/auth"
          render={() => <div>auth</div>}
        />
        <Route
          render={() => (
            <div className="app-layout">
              App Layout
              <Route
                path="/adapters"
                render={() => {
                  console.log('render adapters');
                  return <div>Adapters</div>;
                }}
              />
              <Route
                path="/users"
                render={() => {
                  console.log('render users');
                  return <div>Users</div>;
                }}
              />
            </div>
          )}
        />
      </Switch>
    </div>
  </BrowserRouter>
);

export default Root;

react-router v4在`Miss`里面嵌套`匹配`

1 个答案: