React-Router V5更新URL,但不呈现嵌套组件

时间:2019-06-23 12:28:24

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

我使用> Project | Position | Status > ------: | -------: | :----- > 2 | 1 | A > 2 | 2 | B > 3 | 1 | B > 3 | 2 | B reactreact-routerreact-redux创建了一个应用程序,并且具有以下结构:

connected-react-router

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

- app
  - admin
    - category
      - categoryList
      - categoryAdd

但是由于某些原因,我看不到最后一个组件(/admin -> /admin/category -> /admin/category/add )呈现。

代码(结尾是沙盒链接):

index.js

CategoryAdd

AdminPage.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")
);

Category.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>
  );
}

CategoryList.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);

CategoryAdd.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>
  );
}

这是沙箱:https://codesandbox.io/embed/dark-star-3fhs0

2 个答案:

答案 0 :(得分:1)

您使用的Switch仅匹配一条路线,因此您在index.jsCategory组件中选择的第二条路线将永远不会被渲染。

1)删除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)删除Switch中的Category

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

这可以在您的代码沙箱中使用,但是CategoryAdd组件已损坏,因为您没有导入React。因此,将其添加到第一行:

import React from 'react';

结果: enter image description here

答案 1 :(得分:1)

那是因为您的exact路线上的/admin/category关键字:

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

这仅匹配/admin/category,而不匹配/admin/category/add

不幸的是,删除exact仅能解决您的第一个问题。

另一个是您使用Switch。您应该删除Switch中的Index.js,因为一旦匹配了/admin/category路由,它就不会与类别组件中的任何路由匹配。