React-router v5 更新 URL 但不渲染嵌套组件答案

【问题标题】：React-router v5 updates the URL but doesn't render nested componentReact-router v5 更新 URL 但不渲染嵌套组件
【发布时间】：2019-06-23 12:28:24
【问题描述】：

我使用react、react-router、react-redux、connected-react-router 创建了一个应用程序，并且具有以下结构：

- app
  - admin
    - category
      - categoryList
      - categoryAdd

我的想法是执行以下应用流程：

/admin -> /admin/category -> /admin/category/add

但由于某种原因，我看不到渲染的最后一个组件 (CategoryAdd)。

代码（沙盒链接在最后）：

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Route, Switch, Link } from "react-router-dom"; 
import { ConnectedRouter } from "connected-react-router";
import configureStore, { history } from "./configureStore";

import AdminPage from "./AdminPage";
import Category from "./Category";

const store = configureStore(/* provide initial state if any */);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <>
        <Link to="/admin/category">Category</Link>
        <Switch>
          <Route exact path="/admin" component={AdminPage} />
          <Route exact path="/admin/category" component={Category} />
        </Switch>
      </>
    </ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

AdminPage.js

import React from "react";
import { Link } from "react-router-dom";

export default function AdminPage() {
  return (
    <div style={{ border: "1px solid black", margin: 20 }}>
      <div>AdminPage</div>
      <Link to="/admin/category">Catgory page link</Link>
    </div>
  );
}

Category.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router-dom";
import CategoryList from "./CategoryList";
import CategoryAdd from "./CategoryAdd";

function Category() {
  return (
    <Switch>
      <Route path={`/admin/category`} render={() => <CategoryList />} />
      <Route path={`/admin/category/add`} render={() => <CategoryAdd />} />
    </Switch>
  );
}

export default withRouter(Category);

CategoryList.js

import React from "react";
import { Link } from "react-router-dom";

export default function CategoryList() {
  return (
    <div style={{ border: "1px solid black", margin: 20 }}>
      CategoryTable <Link to="/admin/category/add">Add</Link>
    </div>
  );
}

CategoryAdd.js

export default function Add() {
  return <div style={{ border: "1px solid black", margin: 20 }}>Add Page</div>;
}

这里是沙盒：https://codesandbox.io/embed/dark-star-3fhs0

【问题讨论】：

标签： reactjs react-redux react-router connected-react-router

【解决方案1】：

您使用的Switch 仅匹配一个路由，因此您在index.js 和Category 组件中的第二个路由将永远不会被渲染。

1) 移除Switch 中的Switch 组件和exact 路由属性index.js

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <>
        <Link to="/admin/category">Category</Link>
        <Route path="/admin" component={AdminPage} />
        <Route path="/admin/category" component={Category} />
      </>
    </ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

2) 删除Category中的Switch

function Category() {
  return (
    <>
      <Route path={`/admin/category`} render={() => <CategoryList />} />
      <Route path={`/admin/category/add`} render={() => <CategoryAdd />} />
    </>
  );
}

这在您的代码沙箱中有效，但您的 CategoryAdd 组件已损坏，因为您没有导入 React。所以将它添加到第一行：

import React from 'react';

结果：

【讨论】：

【解决方案2】：

这是因为你的 /admin/category 路由上的 exact 关键字：

<Route exact path="/admin/category" component={Category} />

这仅匹配/admin/category，但不匹配/admin/category/add。

不幸的是，删除exact 只会解决您的第一个问题。

另一个是你使用Switch。您应该删除 Index.js 中的 Switch，因为一旦您匹配了您的 /admin/category 路由，它将不会匹配您的 Category-Component 中的任何路由。

【讨论】：