[英]React-router v5 updates the URL but doesn't render nested component
我使用react
, react-router
, react-redux
, connected-react-router
創建了一個應用程序,並且具有以下結構:
- app
- admin
- category
- categoryList
- categoryAdd
我的想法是執行以下應用程序流程:
/admin -> /admin/category -> /admin/category/add
但由於某種原因,我看不到最后一個組件( CategoryAdd
)呈現。
代碼(最后是沙盒鏈接):
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")
);
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>
);
}
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);
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>
);
}
export default function Add() {
return <div style={{ border: "1px solid black", margin: 20 }}>Add Page</div>;
}
您使用的Switch
僅匹配一條路由,因此您的第二條路由在index.js
和Category
組件中將永遠不會呈現。
1)在index.js
刪除Switch
組件和exact
路由道具
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 />} />
</>
);
}
這可以在您的代碼沙箱中使用,但是由於您沒有導入React
所以CategoryAdd組件已損壞。 因此,將其添加到第一行:
import React from 'react';
那是因為/admin/category
路由上的exact
關鍵字:
<Route exact path="/admin/category" component={Category} />
這僅匹配/admin/category
,而不匹配/admin/category
/admin/category/add
。
不幸的是,刪除exact
內容只能解決您的第一個問題。
另一個是您對Switch
的使用。 您應該在Index.js
刪除Switch
,因為一旦匹配了/admin/category
路由,它將不匹配Category-Component中的任何路由。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.