{"id":131,"date":"2022-04-06T22:26:02","date_gmt":"2022-04-06T14:26:02","guid":{"rendered":"https:\/\/reverieland.cn\/?p=131"},"modified":"2022-04-06T22:26:02","modified_gmt":"2022-04-06T14:26:02","slug":"react-router-dom%e5%92%8creact-router-config","status":"publish","type":"post","link":"https:\/\/reverieland.cn\/index.php\/131\/","title":{"rendered":"react-router-dom\u548creact-router-config"},"content":{"rendered":"\n

\u4e00\u3001\u5b89\u88c5<\/h2>\n\n\n\n
npm i react-router-dom react-router-config \u2013save<\/code><\/pre>\n\n\n\n
\u4e8c\u3001\u5bfc\u5165<\/h2>\n\n\n\n
import { BrowserRouter, Route, Link,Switch,NavLink } from 'react-router-dom';\r\n\r\nimport {renderRoutes} from 'react-router-config';<\/code><\/pre>\n\n\n\n
\u4e09\u3001\u65b0\u5efaJS\u6587\u4ef6<\/h2>\n\n\n\n
home.js<\/p>\n\n\n\n
import React from 'react';\n\n \n\nexport default function Home(){\n\n   return (\n\n      <div>\n\n        <h1>\u8fd9\u662f\u4e3b\u9875<\/h1>\n\n        <a href=\"\/about\">\u53bbabout<\/a>\n\n        <a href=\"\/discover\">\u53bbdiscover<\/a>\n\n      <\/div>    \n\n   )\n\n}\r\n<\/code><\/pre>\n\n\n\n
about.js<\/p>\n\n\n\n
import React from 'react';\n\nimport {Link} from 'react-router-dom';\n\nimport {renderRoutes} from 'react-router-config';\n\n\/\/\u53d8\u91cf\u7684\u5bfc\u51fa\u7528export\uff0c\u800c\u4e0d\u662fexport default\n\nexport const About = (props)=>{\n\n   const route = props.route\n\n   return (  \n\n      <div>\n\n        <h1>\u8fd9\u662f\u5173\u4e8e<\/h1>\n\n        <a href=\"\/\">\u53bbhome<\/a>\n\n        <a href=\"\/discover\">\u53bbdiscover<\/a>\n\n        <Link to=\"\/about\/my\">\u5173\u4e8e\u6211\u7684<\/Link>\n\n        <br \/>\n\n        <Link to=\"\/about\/you\">\u5173\u4e8e\u4f60\u7684<\/Link>\n\n        {\/*\u4f7f\u7528renderRoutes\u65b9\u6cd5\u7ee7\u7eed\u6e32\u67d3\u5b50\u8def\u7531\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u53ef\u4ee5\u8fdb\u884c\u4f20\u53c2*\/}\n\n        {renderRoutes(route.childrens,{user:'hello'})}\n\n      <\/div>\n\n   )\n\n}\r<\/code><\/pre>\n\n\n\n
discover.js<\/p>\n\n\n\n
import React from 'react';\n\nimport {Link} from 'react-router-dom';\n\nimport {renderRoutes} from 'react-router-config';\n\n \n\nexport default function Discover(props){\n\n   const route = props.route\n\n   return (  \n\n      <div>\n\n        <h1>\u8fd9\u662f\u53d1\u73b0<\/h1>\n\n        <a href=\"\/\">\u53bbhome<\/a><br \/>\n\n        <a href=\"\/about\">\u53bbabout<\/a><br \/>\n\n        <Link to=\"\/discover\/earth\">\u53d1\u73b0\u5730\u7403<\/Link>\n\n        <br \/>\n\n        <Link to=\"\/discover\/star\">\u53d1\u73b0\u661f\u661f<\/Link>\n\n        {renderRoutes(route.childrens)}\n\n      <\/div>\n\n   )\n\n}\r<\/code><\/pre>\n\n\n\n
\u4e4b\u540e\uff0c\u65b0\u5efaJS\u5b50\u6587\u4ef6my.js you.js star.js earth.js\uff08\u7565\uff09<\/p>\n\n\n\n
\u56db\u3001\u914d\u7f6erouter.js<\/h2>\n\n\n\n
\u5728src\u76ee\u5f55\u4e0b\u65b0\u5efa\u6587\u4ef6\u5939\uff08\u6b64\u5904\u4e3aroute\uff09\uff0c\u7136\u540e\u5728\u8be5\u76ee\u5f55\u4e0b\u65b0\u5efaroute.js\u6587\u4ef6\uff0c\u5728route.js\u91cc\u8fdb\u884c\u6587\u4ef6\u7684\u914d\u7f6e\u5982\u4e0b\uff1a<\/p>\n\n\n\n
\nimport Home from '..\/component\/home'\n\nimport {About} from '..\/component\/about'\n\nimport Discover from '..\/component\/discover'\n\nimport Earth from '..\/component\/earth'\n\nimport Star from '..\/component\/star'\n\nimport My from '..\/component\/my'\n\nimport You from '..\/component\/you'\n\n const routes = [\n\n   {\n\n      path:'\/',\n\n      component: Home,\n\n      exact:true\n\n   },\n\n   {\n\n      path:'\/about',\n\n      component: About,\n\n      childrens:[\n\n        {\n\n        path:'\/about\/my',\n\n        component:My\n\n        },\n\n        {\n\n        path:'\/about\/you',\n\n        component:You\n\n        }\n\n      ]\n\n   },\n\n   {\n\n      path:'\/discover',\n\n      component: Discover,\n\n      childrens:[\n\n        {\n\n        path:'\/discover\/earth',\n\n        component:Earth\n\n        },\n\n        {\n\n        path:'\/discover\/star',\n\n        component:Star\n\n        }\n\n      ]\n\n   }\n\n]\n\nexport {routes}\r\n\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\r<\/code><\/pre>\n\n\n\n
\u4e94\u3001\u5728index.js\u4e2d\u6e32\u67d3\u8def\u7531<\/h2>\n\n\n\n
import React from 'react';\n\nimport ReactDOM from 'react-dom';\n\nimport * as serviceWorker from '.\/serviceWorker';\n\nimport { BrowserRouter} from \"react-router-dom\";\n\nimport { renderRoutes } from \"react-router-config\";\n\nimport '.\/index.css';\n\nimport {routes} from '.\/router\/route';\n\r<\/code><\/pre>\n\n\n\n
\u4f7f\u7528renderRoutes\u65b9\u6cd5\u6e32\u67d3\u8def\u7531\uff1a<\/p>\n\n\n\n
ReactDOM.render(<BrowserRouter>\r\n{ renderRoutes(routes) }\r\n<\/BrowserRouter>, document.getElementById('root'));\r\nserviceWorker.unregister();<\/code><\/pre>\n\n\n\n
reference:https:\/\/blog.csdn.net\/lijianxian199799\/article\/details\/100762036<\/em><\/p>\n\n\n\n
---END---<\/p>\n","protected":false},"excerpt":{"rendered":"
react\u8def\u7531\u76f8\u5173<\/p>\n","protected":false},"author":1,"featured_media":132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"categories":[3],"tags":[18],"class_list":["post-131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-react"],"_links":{"self":[{"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/posts\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":1,"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/posts\/131\/revisions"}],"predecessor-version":[{"id":133,"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/posts\/131\/revisions\/133"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/media\/132"}],"wp:attachment":[{"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/media?parent=131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/categories?post=131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reverieland.cn\/index.php\/wp-json\/wp\/v2\/tags?post=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}