{"id":38145,"date":"2023-12-02T02:41:46","date_gmt":"2023-06-02T16:02:41","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/"},"modified":"2024-05-04T11:44:55","modified_gmt":"2024-05-04T03:44:55","slug":"react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/","title":{"rendered":"React Router \u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb"},"content":{"rendered":"<h1>\u5bfc\u5f15\u9875<\/h1>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React \u306e\u57fa\u672c<\/ul>\n<\/li>\n<\/ul>\n<p>\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React Router \u7de8 \u2190\u2605\u3053\u3053<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c flux\u7de8<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Redux \u7de8: immutability \u3068\u306f<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Redux \u7de8: Redux \u5358\u4f53\u3067\u72b6\u614b\u7ba1\u7406\u3092\u3057\u3063\u304b\u308a\u7406\u89e3\u3059\u308b<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Redux \u7de8: Redux \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Mobx \u7de8<\/p>\n<h1>\u5173\u4e8e\u5355\u9875\u9762\u5e94\u7528\uff08SPA\uff09<\/h1>\n<p>\u8fd9\u6b21\u6211\u4eec\u60f3\u8981\u5b66\u4e60\u4f7f\u7528react-router\u6765\u521b\u5efa\u57fa\u4e8e\u58f0\u660e\u6027\u8bed\u6cd5\u7684\u5355\u9875\u5e94\u7528\uff08SPA\uff09\u3002<br \/>\nReact Router\u662f\u4e00\u4e2a\u5c06UI\u548cURL\u540c\u6b65\u7684\u5e93\u3002\u4f8b\u5982\uff0c\u5f53\u8bbf\u95ee\u8005\u8bbf\u95eeReact\u5e94\u7528\u7a0b\u5e8f\u65f6\uff0c\u5982\u679c\u8bbf\u95ee\u7684\u662fhttp:\/\/app.example.com\/\uff0c\u5219\u4f1a\u5448\u73b0Home\u7ec4\u4ef6\uff1b\u5982\u679c\u8bbf\u95ee\u7684\u662fhttp:\/\/app.example.com\/address\uff0c\u5219\u4f1a\u5448\u73b0\u663e\u793a\u5730\u5740\u7684\u7ec4\u4ef6\u3002\u901a\u8fc7\u4f7f\u7528React Router\uff0c\u6211\u4eec\u53ef\u4ee5\u8f7b\u677e\u5730\u6267\u884c\u8fd9\u6837\u7684\u64cd\u4f5c\u3002<\/p>\n<h1>\u5728\u672c\u6587\u4e2d\u4f7f\u7528\u7684\u6587\u4ef6<\/h1>\n<p>\u672c\u6587\u4f7f\u7528\u7684\u6587\u4ef6\u53ef\u4ee5\u5728\u4ee5\u4e0b\u7684\u5b58\u50a8\u5e93\u4e2d\u627e\u5230\u3002<\/p>\n<ul class=\"post-ul\">https:\/\/github.com\/TsutomuNakamura\/my-react-js-tutorials\/tree\/master\/2-react-router\/00_start_point\/react_router<\/ul>\n<h1>\u521b\u5efa\u9879\u76ee<\/h1>\n<p>\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u5168\u65b0\u7684\u9879\u76ee\uff0c\u4e0e\u4e0a\u4e00\u6b21\u7684\u9879\u76ee\u5b8c\u5168\u4e0d\u540c\u3002<br \/>\n\u8fd9\u6b21\u7684\u5e94\u7528\u7a0b\u5e8f\u5c06\u4f7f\u7528Bootstrap\u4e3b\u9898\uff0c\u4f46\u662fBootstrap\u901a\u5e38\u9700\u8981jQuery\u6765\u521b\u5efa\u52a8\u753b\u6548\u679c\uff0c\u4f46\u7531\u4e8e\u8fd9\u6b21\u53ea\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff0c\u6240\u4ee5\u4e0d\u9700\u8981\u4f7f\u7528jQuery\u8fdb\u884c\u52a8\u753b\u6548\u679c\uff0c\u56e0\u6b64\u4e0d\u52a0\u8f7djQuery\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> <span class=\"nb\">mkdir <\/span>react_router\r\n<span class=\"gp\">$<\/span> <span class=\"nb\">cd <\/span>react_router\r\n<span class=\"gp\">$<\/span> npm init <span class=\"nt\">-y<\/span>\r\n<span class=\"gp\">$<\/span> npm <span class=\"nb\">install<\/span> <span class=\"nt\">--save-dev<\/span> @babel\/core @babel\/preset-env @babel\/preset-react babel-loader <span class=\"se\">\\<\/span>\r\n<span class=\"go\">        webpack webpack-cli webpack-dev-server \\\r\n        react react-dom \\\r\n        react-router react-router-dom\r\n<\/span><\/code><\/pre>\n<p>\u5728package.json\u7684scripts\u4e2d\uff0c\u4f7f\u7528start\u547d\u4ee4\u6765\u8bbe\u7f6e\u542f\u52a8webpack-dev-server\u3002<\/p>\n<pre class=\"post-pre\"><code>  <span class=\"dl\">\"<\/span><span class=\"s2\">scripts<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"dl\">\"<\/span><span class=\"s2\">start<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">webpack-dev-server --content-base src --mode development --inline<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>    <span class=\"c1\">\/\/ &lt;- \u8ffd\u52a0<\/span>\r\n    <span class=\"p\">......<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<\/code><\/pre>\n<p>\u8fd9\u6b21\uff0c\u6211\u4eec\u6253\u7b97\u5c06\u9884\u5148\u5b8c\u6210\u7684\u9759\u6001Web\u9875\u9762\u8f6c\u79fb\u5230React\uff08JavaScript\uff09\u7aef\uff0c\u4ee5\u5b9e\u73b0\u52a8\u6001\u6e32\u67d3\u3002<br \/>\n\u8bf7\u53c2\u8003GitHub\u4ed3\u5e93\u51c6\u5907\u4ee5\u4e0b\u7684\u6587\u4ef6\u3002\u6211\u4eec\u5c06\u4ece\u4ee5\u4e0b\u72b6\u6001\u5f00\u59cb\u8fdb\u884c\u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"kd\">var<\/span> <span class=\"nx\">debug<\/span>   <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NODE_ENV<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">production<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"kd\">var<\/span> <span class=\"nx\">webpack<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">webpack<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n<span class=\"kd\">var<\/span> <span class=\"nx\">path<\/span>    <span class=\"o\">=<\/span> <span class=\"nf\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">path<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n\r\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"na\">context<\/span><span class=\"p\">:<\/span> <span class=\"nx\">path<\/span><span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"nx\">__dirname<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">src<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span>\r\n  <span class=\"na\">entry<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/js\/client.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">module<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">rules<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span>\r\n      <span class=\"na\">test<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/<\/span><span class=\"se\">\\.<\/span><span class=\"sr\">jsx<\/span><span class=\"se\">?<\/span><span class=\"sr\">$\/<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">exclude<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/<\/span><span class=\"se\">(<\/span><span class=\"sr\">node_modules|bower_components<\/span><span class=\"se\">)<\/span><span class=\"sr\">\/<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">use<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span>\r\n        <span class=\"na\">loader<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">babel-loader<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"na\">options<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n          <span class=\"na\">presets<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@babel\/preset-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@babel\/preset-env<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\r\n        <span class=\"p\">}<\/span>\r\n      <span class=\"p\">}]<\/span>\r\n    <span class=\"p\">}]<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"na\">output<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"nx\">__dirname<\/span> <span class=\"o\">+<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/src\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">filename<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">client.min.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">publicPath<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"na\">devServer<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">historyApiFallback<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"nx\">debug<\/span> <span class=\"p\">?<\/span> <span class=\"p\">[]<\/span> <span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"k\">new<\/span> <span class=\"nx\">webpack<\/span><span class=\"p\">.<\/span><span class=\"nx\">optimize<\/span><span class=\"p\">.<\/span><span class=\"nc\">OccurrenceOrderPlugin<\/span><span class=\"p\">(),<\/span>\r\n    <span class=\"k\">new<\/span> <span class=\"nx\">webpack<\/span><span class=\"p\">.<\/span><span class=\"nx\">optimize<\/span><span class=\"p\">.<\/span><span class=\"nc\">UglifyJsPlugin<\/span><span class=\"p\">({<\/span> <span class=\"na\">mangle<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span> <span class=\"na\">sourcemap<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span> <span class=\"p\">}),<\/span>\r\n  <span class=\"p\">],<\/span>\r\n<span class=\"p\">};<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"nt\">&lt;html<\/span> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;head&gt;<\/span>\r\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">charset=<\/span><span class=\"s\">\"utf-8\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">http-equiv=<\/span><span class=\"s\">\"X-UA-Compatible\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"IE=edge\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"description\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"author\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;title&gt;<\/span>React<span class=\"nt\">&lt;\/title&gt;<\/span>\r\n  <span class=\"c\">&lt;!-- Bootstrap Core CSS --&gt;<\/span>\r\n  <span class=\"nt\">&lt;link<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/maxcdn.bootstrapcdn.com\/bootswatch\/3.3.6\/cerulean\/bootstrap.min.css\"<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span><span class=\"nt\">&gt;<\/span>\r\n\r\n  <span class=\"c\">&lt;!-- Custom Fonts --&gt;<\/span>\r\n  <span class=\"c\">&lt;!-- &lt;link href=\"font-awesome\/css\/font-awesome.min.css\" rel=\"stylesheet\" type=\"text\/css\"&gt; --&gt;<\/span>\r\n  <span class=\"nt\">&lt;link<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"http:\/\/fonts.googleapis.com\/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic\"<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"text\/css\"<\/span><span class=\"nt\">&gt;<\/span>\r\n<span class=\"nt\">&lt;\/head&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;body&gt;<\/span>\r\n\r\n  <span class=\"c\">&lt;!-- Navigation --&gt;<\/span>\r\n  <span class=\"nt\">&lt;nav<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"navbar navbar-inverse navbar-fixed-top\"<\/span> <span class=\"na\">role=<\/span><span class=\"s\">\"navigation\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"container\"<\/span><span class=\"nt\">&gt;<\/span>\r\n      <span class=\"c\">&lt;!-- Brand and toggle get grouped for better mobile display --&gt;<\/span>\r\n      <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"navbar-header\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;button<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"button\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"navbar-toggle\"<\/span> <span class=\"na\">data-toggle=<\/span><span class=\"s\">\"collapse\"<\/span> <span class=\"na\">data-target=<\/span><span class=\"s\">\"#bs-example-navbar-collapse-1\"<\/span><span class=\"nt\">&gt;<\/span>\r\n          <span class=\"nt\">&lt;span<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"sr-only\"<\/span><span class=\"nt\">&gt;<\/span>Toggle navigation<span class=\"nt\">&lt;\/span&gt;<\/span>\r\n          <span class=\"nt\">&lt;span<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"icon-bar\"<\/span><span class=\"nt\">&gt;&lt;\/span&gt;<\/span>\r\n          <span class=\"nt\">&lt;span<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"icon-bar\"<\/span><span class=\"nt\">&gt;&lt;\/span&gt;<\/span>\r\n          <span class=\"nt\">&lt;span<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"icon-bar\"<\/span><span class=\"nt\">&gt;&lt;\/span&gt;<\/span>\r\n        <span class=\"nt\">&lt;\/button&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n      <span class=\"c\">&lt;!-- Collect the nav links, forms, and other content for toggling --&gt;<\/span>\r\n      <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"collapse navbar-collapse\"<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"bs-example-navbar-collapse-1\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;ul<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"nav navbar-nav\"<\/span><span class=\"nt\">&gt;<\/span>\r\n          <span class=\"nt\">&lt;li&gt;<\/span>\r\n            <span class=\"nt\">&lt;a<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"#\"<\/span><span class=\"nt\">&gt;<\/span>Featured<span class=\"nt\">&lt;\/a&gt;<\/span>\r\n          <span class=\"nt\">&lt;\/li&gt;<\/span>\r\n          <span class=\"nt\">&lt;li&gt;<\/span>\r\n            <span class=\"nt\">&lt;a<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"#\"<\/span><span class=\"nt\">&gt;<\/span>Archives<span class=\"nt\">&lt;\/a&gt;<\/span>\r\n          <span class=\"nt\">&lt;\/li&gt;<\/span>\r\n          <span class=\"nt\">&lt;li&gt;<\/span>\r\n            <span class=\"nt\">&lt;a<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"#\"<\/span><span class=\"nt\">&gt;<\/span>Settings<span class=\"nt\">&lt;\/a&gt;<\/span>\r\n          <span class=\"nt\">&lt;\/li&gt;<\/span>\r\n        <span class=\"nt\">&lt;\/ul&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n      <span class=\"c\">&lt;!-- \/.navbar-collapse --&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/nav&gt;<\/span>\r\n  <span class=\"c\">&lt;!-- Page Content --&gt;<\/span>\r\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"container\"<\/span> <span class=\"na\">style=<\/span><span class=\"s\">\"margin-top: 60px;\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"row\"<\/span><span class=\"nt\">&gt;<\/span>\r\n      <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-lg-12\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;div<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"app\"<\/span><span class=\"nt\">&gt;&lt;\/div&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n    <span class=\"c\">&lt;!-- Call to Action Well --&gt;<\/span>\r\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"row\"<\/span><span class=\"nt\">&gt;<\/span>\r\n      <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-lg-12\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"well text-center\"<\/span><span class=\"nt\">&gt;<\/span>\r\n          Ad spot goes here\r\n        <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n      <span class=\"c\">&lt;!-- \/.col-lg-12 --&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n    <span class=\"c\">&lt;!-- \/.row --&gt;<\/span>\r\n    <span class=\"c\">&lt;!-- Content Row --&gt;<\/span>\r\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"row\"<\/span><span class=\"nt\">&gt;<\/span>\r\n      <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-md-4\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;h2&gt;<\/span>Heading 1<span class=\"nt\">&lt;\/h2&gt;<\/span>\r\n        <span class=\"nt\">&lt;p&gt;<\/span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.<span class=\"nt\">&lt;\/p&gt;<\/span>\r\n        <span class=\"nt\">&lt;a<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"btn btn-default\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"#\"<\/span><span class=\"nt\">&gt;<\/span>More Info<span class=\"nt\">&lt;\/a&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n      <span class=\"c\">&lt;!-- \/.col-md-4 --&gt;<\/span>\r\n      <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-md-4\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;h2&gt;<\/span>Heading 2<span class=\"nt\">&lt;\/h2&gt;<\/span>\r\n        <span class=\"nt\">&lt;p&gt;<\/span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.<span class=\"nt\">&lt;\/p&gt;<\/span>\r\n        <span class=\"nt\">&lt;a<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"btn btn-default\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"#\"<\/span><span class=\"nt\">&gt;<\/span>More Info<span class=\"nt\">&lt;\/a&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n      <span class=\"c\">&lt;!-- \/.col-md-4 --&gt;<\/span>\r\n      <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-md-4\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;h2&gt;<\/span>Heading 3<span class=\"nt\">&lt;\/h2&gt;<\/span>\r\n        <span class=\"nt\">&lt;p&gt;<\/span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.<span class=\"nt\">&lt;\/p&gt;<\/span>\r\n        <span class=\"nt\">&lt;a<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"btn btn-default\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"#\"<\/span><span class=\"nt\">&gt;<\/span>More Info<span class=\"nt\">&lt;\/a&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n      <span class=\"c\">&lt;!-- \/.col-md-4 --&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n    <span class=\"c\">&lt;!-- \/.row --&gt;<\/span>\r\n    <span class=\"c\">&lt;!-- Footer --&gt;<\/span>\r\n    <span class=\"nt\">&lt;footer&gt;<\/span>\r\n      <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"row\"<\/span><span class=\"nt\">&gt;<\/span>\r\n        <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"col-lg-12\"<\/span><span class=\"nt\">&gt;<\/span>\r\n          <span class=\"nt\">&lt;p&gt;<\/span>Copyright <span class=\"ni\">&amp;copy;<\/span> KillerNews.net<span class=\"nt\">&lt;\/p&gt;<\/span>\r\n        <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n      <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/footer&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n\r\n  <span class=\"c\">&lt;!-- \/.container --&gt;<\/span>\r\n  <span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"client.min.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n<span class=\"nt\">&lt;\/body&gt;<\/span>\r\n<span class=\"nt\">&lt;\/html&gt;<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Layout<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Layout<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n\r\n<span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u5982\u679c\u51c6\u5907\u597d\u4e86\uff0c\u8bf7\u5148\u542f\u52a8Web\u670d\u52a1\u5668\u5e76\u786e\u8ba4\u9875\u9762\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> npm start\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/19-0.png\" alt=\"React_ReactRouter0001.png\" \/><\/div>\n<p>\u6211\u60f3\u7528React router\u6765\u5c06\u6b64\u9875\u9762\u8bbe\u4e3aSPA\u5e76\u52a8\u6001\u5730\u6539\u53d8\u9875\u9762\u7684\u5448\u73b0\u65b9\u5f0f\u3002<\/p>\n<h1>\u5b89\u88c5React Router<\/h1>\n<p>React \u74b0\u5883\u5efa\u7acb\u5b8c\u6210\u540e\uff0c\u63a5\u4e0b\u6765\u9700\u8981\u5b89\u88c5\u4e0e react-router \u76f8\u5173\u7684\u5305\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> npm <span class=\"nb\">install<\/span> <span class=\"nt\">--save-dev<\/span> react-router react-router-dom\r\n<span class=\"gp\">$<\/span> <span class=\"c\"># react-router v4 \u304b\u3089\u306freact-router-dom \u3082\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059<\/span>\r\n<\/code><\/pre>\n<p>\u5b89\u88c5\u5fc5\u8981\u7684\u5e93\u540e\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u6bcf\u4e2a\u7ec4\u4ef6\u3002<br \/>\n\u9996\u5148\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u7528\u4e8e\u6e32\u67d3\u6587\u7ae0\u7684\u7279\u8272\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Featured<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Featured<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Archives<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Settings<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5404\u7ec4\u4ef6\u7684\u57fa\u7840\u5df2\u7ecf\u521b\u5efa\u5b8c\u6210\u3002\u63a5\u4e0b\u6765\u6211\u4eec\u5c06\u7f16\u8f91 client.js \u6587\u4ef6\uff0c\u4f7f\u7528 React Router\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserRouter<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">Router<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Route<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span> \r\n <span class=\"k\">import<\/span> <span class=\"nx\">Layout<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Layout<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"nx\">Featured<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Featured<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"nx\">Archives<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Archives<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"nx\">Settings<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Settings<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span> \r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n \r\n<span class=\"hdl\"><span class=\"o\">-<\/span><span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+<\/span><span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">Router<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">exact<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Featured<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Archives<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Settings<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Layout<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Router&gt;<\/span><span class=\"err\">,<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+<\/span><span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/span><\/code><\/pre>\n<p>\u5982\u679c\u60a8\u5217\u51fa\u7ec4\u4ef6\uff0c\u60a8\u53ef\u4ee5\u66f4\u76f4\u89c2\u5730\u4e86\u89e3React Router\u7684\u7279\u70b9\u3002\u5728React Router\u4e2d\uff0c\u5f53\u7528\u6237\u8bbf\u95ee\/\u3001\/archives\u548c\/settings\u8def\u5f84\u65f6\uff0c\u53ef\u4ee5\u5c06\u5bf9\u5e94\u7684\u7ec4\u4ef6\u5206\u522b\u6307\u5b9a\u4e3aFeatured\u3001Archives\u548cSettings\uff0c\u5c31\u5982\u4e0a\u6240\u8ff0\u3002<br \/>\n\u6b64\u5916\uff0c\u8bf7\u6ce8\u610f\u4e0a\u8ff0\u7684React Router\u53ea\u6709\u4e00\u4e2aexact\u5173\u952e\u5b57\u9644\u52a0\u5728\u4e0a\u9762\u3002<br \/>\n\u8fd9\u610f\u5473\u7740\u5f53\u7528\u6237\u8bbf\u95ee\u7684\u8def\u5f84\u4e0e\/\u7cbe\u786e\u5339\u914d\u65f6\uff0c\u624d\u4f1a\u663e\u793a\u8be5\u7ec4\u4ef6\u3002<br \/>\n\u8fd9\u5c06\u6210\u4e3a\u8bbf\u95eehttp:\/\/app.example.com\/\u65f6\u663e\u793a\u7684\u7ec4\u4ef6\u3002<br \/>\n\u5982\u679c\u6ca1\u6709\u8fd9\u4e2aexact\u5173\u952e\u5b57\uff0c\u65e0\u8bba\u662f\/foo\u8fd8\u662f\/bar\u8fd8\u662f\/archives\uff0cFeatured\u7ec4\u4ef6\u90fd\u4f1a\u663e\u793a\u51fa\u6765\uff0c\u6240\u4ee5\u8bf7\u6ce8\u610f\u3002<br \/>\n\u603b\u4e4b\uff0c\u5f53\u7528\u6237\u8bbf\u95ee\/archives\u8def\u5f84\u65f6\uff0cFeatured\u7ec4\u4ef6\u548cArchives\u7ec4\u4ef6\u90fd\u4f1a\u663e\u793a\u51fa\u6765\u3002<br \/>\n\u53e6\u5916\uff0c\u4f7f\u7528exact\u5173\u952e\u5b57\u6307\u5b9a\u7684\u7ec4\u4ef6\u4e0eReact Router v3\u4e2d\u7684IndexRoute\u76f8\u5f53\uff0c\u8bf7\u5728React Router v4\u4e2d\u4f7f\u7528exact\u5173\u952e\u5b57\u3002<\/p>\n<p>\u5f53\u7528\u6237\u8bbf\u95ee &#8220;\/archives\/foo&#8221; \u6216 &#8220;\/archives\/bar&#8221; \u65f6\uff0c \u5c06\u663e\u793a\u76f8\u5e94\u7684\u7ec4\u4ef6\u3002<\/p>\n<p>\u5728\u4e86\u89e3\u4e86React Router\u7684\u5927\u81f4\u7279\u70b9\u4e4b\u540e\uff0c\u8ba9\u6211\u4eec\u518d\u6b21\u8fd0\u884cnpm start\u547d\u4ee4\uff0c\u786e\u8ba4\u4e00\u4e0bhttp:\/\/localhost:8080\u662f\u5426\u6b63\u5e38\u663e\u793a\u3002\u5982\u679c\u80fd\u591f\u4ee5\u4e0e\u6700\u521d\u76f8\u540c\u7684\u5e03\u5c40\u663e\u793a\u4e14\u6ca1\u6709\u9519\u8bef\uff0c\u90a3\u4e48\u5c31\u53ef\u4ee5\u4e86\u3002\u81f3\u5c11\u5230\u8fd9\u91cc\uff0c\u6211\u4eec\u5df2\u7ecf\u5b8c\u6210\u4e86\u8fdb\u5165React Router\u7684\u4e0b\u4e00\u6b65\u7684\u51c6\u5907\u5de5\u4f5c\u3002<\/p>\n<h2>\u6dfb\u52a0\u94fe\u63a5<\/h2>\n<p>\u8ba9\u6211\u4eec\u4fee\u6539Layout.js\uff0c\u6dfb\u52a0\u4e00\u4e2a\u6307\u5411Archive\u548cSettings\u7684\u94fe\u63a5\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span> \r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link&gt;<\/span><span class=\"err\">,<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u901a\u8fc7\u4e0a\u8ff0\u63cf\u8ff0\uff0c\u6bcf\u6b21\u70b9\u51fb\u94fe\u63a5\u65f6\uff0cRoute\u7ec4\u4ef6\u5d4c\u5165\u5230client.js\u4e2d\u5e76\u4f20\u9012\u7ed9Layout\u7ec4\u4ef6\uff0c\u8fd9\u6837Layout\u7ec4\u4ef6\u5c31\u53ef\u4ee5\u4ecethis.props.children\u4e2d\u5f15\u7528Route\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\n<span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span>\r\n  <span class=\"o\">&lt;<\/span><span class=\"nx\">Router<\/span><span class=\"o\">&gt;<\/span>\r\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">&gt;<\/span>                                                 <span class=\"c1\">\/\/ (2) Layout \u306b\u6e21\u308a\u3001Layout \u304b\u3089this.props.children \u3067\u53c2\u7167\u3067\u304d\u308b<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">exact<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Featured<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;\r\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Archives<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route&gt;  \/<\/span><span class=\"o\">\/<\/span> <span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"nx\">\u4f8b\u3048\u3070Layout<\/span> <span class=\"nx\">\u306earchives<\/span> <span class=\"nx\">\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068Archives<\/span> <span class=\"nx\">\u304c<\/span><span class=\"p\">...<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Settings<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Layout<\/span><span class=\"err\">&gt;\r\n<\/span>  <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Router&gt;<\/span><span class=\"err\">,\r\n<\/span><span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u8ba9\u6211\u4eec\u518d\u6b21\u5728\u8fd9\u91cc\u663e\u793ahttp:\/\/localhost:8080\uff0c\u5e76\u5206\u522b\u70b9\u51fb&#8221;archives&#8221;\u548c&#8221;settings&#8221;\u94fe\u63a5\u3002<br \/>\n\u6bcf\u4e2a&#8221;Archives&#8221;\u7ec4\u4ef6\u548c&#8221;Settings&#8221;\u7ec4\u4ef6\u5c06\u4f1a\u4ea4\u66ff\u663e\u793a\u51fa\u6765\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/39-0.gif\" alt=\"React_ReactRouter0002.gif\" \/><\/div>\n<h2>\u8bd5\u8bd5\u7528\u6309\u94ae\u88c5\u9970\u94fe\u63a5<\/h2>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button&gt;&lt;\/<\/span><span class=\"nx\">Link<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button&gt;&lt;\/<\/span><span class=\"nx\">Link<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span>       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u901a\u8fc7\u5c06button\u5143\u7d20\u7684class\u8bbe\u7f6e\u4e3a&#8221;class = btn btn-danger&#8221;\uff0c\u53ef\u4ee5\u5e94\u7528Bootstrap\u7684CSS\u5e76\u663e\u793a\u5e26\u88c5\u9970\u7684\u6309\u94ae\u3002<br \/>\n\u7136\u800c\uff0c\u5b9e\u9645\u4e0a&#8221;class&#8221;\u8fd9\u4e2a\u5173\u952e\u8bcd\u662fJavaScript\u7684\u4fdd\u7559\u5b57\uff0c\u6240\u4ee5\u4e0d\u80fd\u5728JavaScript\u6e90\u4ee3\u7801\u4e2d\u4f7f\u7528\u8fd9\u4e2a\u5173\u952e\u8bcd\u3002<br \/>\n\u4e8b\u5b9e\u4e0a\uff0c\u5728JSX\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528\u7684\u662fclassName\u6765\u8868\u793aHTML\u7684class\u5c5e\u6027\uff0c\u800c\u4e0d\u662fclass\u3002<\/p>\n<p>\u7136\u800c\uff0c\u5982\u679c\u5728JSX\u4e2d\u4e0d\u80fd\u4f7f\u7528class\u5173\u952e\u5b57\uff0c\u90a3\u4e48\u5728JavaScript\u4e2d\u4f7f\u7528\u7c7b\u4f3cHTML\u6807\u7b7e\u7684JSX\u7684\u4f18\u70b9\u5c31\u53d8\u5f97\u5fae\u4e4e\u5176\u5fae\u4e86\u2026\u2026\u5982\u679c\u4f60\u6301\u6709\u8fd9\u6837\u7684\u89c2\u70b9\uff0c\u90a3\u4e48\u53ef\u4ee5\u4f7f\u7528babel-plugin-react-html-attrs\u6765\u4f7fJSX\u4e2d\u4e5f\u80fd\u4f7f\u7528class\u5173\u952e\u5b57\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> npm <span class=\"nb\">install<\/span> <span class=\"nt\">--save-dev<\/span> babel-plugin-react-html-attrs\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code> <span class=\"kd\">var<\/span> <span class=\"nx\">debug<\/span>   <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NODE_ENV<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">production<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"kd\">var<\/span> <span class=\"nx\">webpack<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">webpack<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n <span class=\"kd\">var<\/span> <span class=\"nx\">path<\/span>    <span class=\"o\">=<\/span> <span class=\"nf\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">path<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n \r\n <span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"na\">context<\/span><span class=\"p\">:<\/span> <span class=\"nx\">path<\/span><span class=\"p\">.<\/span><span class=\"nf\">join<\/span><span class=\"p\">(<\/span><span class=\"nx\">__dirname<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">src<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span>\r\n   <span class=\"na\">entry<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/js\/client.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n   <span class=\"na\">module<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"na\">rules<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span>\r\n       <span class=\"na\">test<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/<\/span><span class=\"se\">\\.<\/span><span class=\"sr\">jsx<\/span><span class=\"se\">?<\/span><span class=\"sr\">$\/<\/span><span class=\"p\">,<\/span>\r\n       <span class=\"na\">exclude<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/<\/span><span class=\"se\">(<\/span><span class=\"sr\">node_modules|bower_components<\/span><span class=\"se\">)<\/span><span class=\"sr\">\/<\/span><span class=\"p\">,<\/span>\r\n       <span class=\"na\">use<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span>\r\n         <span class=\"na\">loader<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">babel-loader<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n         <span class=\"na\">options<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">react-html-attrs<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span>\r\n<\/span>           <span class=\"na\">presets<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@babel\/preset-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@babel\/preset-env<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\r\n         <span class=\"p\">}<\/span>\r\n       <span class=\"p\">}]<\/span>\r\n     <span class=\"p\">}]<\/span>\r\n   <span class=\"p\">},<\/span>\r\n   <span class=\"na\">output<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"nx\">__dirname<\/span> <span class=\"o\">+<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/src\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n     <span class=\"na\">filename<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">client.min.js<\/span><span class=\"dl\">\"<\/span>\r\n   <span class=\"p\">},<\/span>\r\n   <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"nx\">debug<\/span> <span class=\"p\">?<\/span> <span class=\"p\">[]<\/span> <span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n     <span class=\"k\">new<\/span> <span class=\"nx\">webpack<\/span><span class=\"p\">.<\/span><span class=\"nx\">optimize<\/span><span class=\"p\">.<\/span><span class=\"nc\">OccurrenceOrderPlugin<\/span><span class=\"p\">(),<\/span>\r\n     <span class=\"k\">new<\/span> <span class=\"nx\">webpack<\/span><span class=\"p\">.<\/span><span class=\"nx\">optimize<\/span><span class=\"p\">.<\/span><span class=\"nc\">UglifyJsPlugin<\/span><span class=\"p\">({<\/span> <span class=\"na\">mangle<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span> <span class=\"na\">sourcemap<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span> <span class=\"p\">}),<\/span>\r\n   <span class=\"p\">],<\/span>\r\n <span class=\"p\">};<\/span>\r\n<\/code><\/pre>\n<p>\u8bf7\u5728\u8fd9\u91cc\u91cd\u65b0\u8fd0\u884cnpm start\u547d\u4ee4\u3002<br \/>\n\u7136\u540e\uff0c\u8bf7\u518d\u6b21\u5728Web\u6d4f\u89c8\u5668\u4e2d\u9a8c\u8bc1http:\/\/localhost:8080\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/47-0.png\" alt=\"React_ReactRouter0003.png\" \/><\/div>\n<p>\u60a8\u80fd\u786e\u8ba4\u6309\u94ae\u662f\u5426\u5df2\u7528Bootstrap\u7684CSS\u8fdb\u884c\u88c5\u9970\u5417\uff1f<br \/>\n\u4f7f\u7528JSX\uff0c\u60a8\u53ef\u4ee5\u50cfHTML\u4e00\u6837\u4f7f\u7528class\u5c5e\u6027\uff08\u5982\u679c\u6ca1\u6709babel-plugin-react-html-attrs\uff0c\u5219\u4f7f\u7528className\u5c5e\u6027\uff09\uff0c\u6765\u6307\u5b9aHTML\u7684class\u5c5e\u6027\u3002<\/p>\n<h2>\u88dc\u5145\uff1a\u5176\u4ed6class\u5c6c\u6027\u7684\u6307\u5b9a\u65b9\u6cd5<\/h2>\n<p>\u5728\u4e0a\u8ff0\u7684\u6e90\u4ee3\u7801\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2abutton\u5143\u7d20\uff0c\u5e76\u5728\u5176\u4e2d\u6dfb\u52a0\u4e86class\u5c5e\u6027\uff0c\u4f46\u662f\u5728react-router-dom\u7684Link\u7ec4\u4ef6\u4e2d\u6dfb\u52a0class\u5c5e\u6027\u4e5f\u53ef\u4ee5\u505a\u5230\u7c7b\u4f3c\u7684\u4e8b\u60c5\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5f53\u60a8\u5728Web\u6d4f\u89c8\u5668\u4e2d\u67e5\u770bhttp:\/\/localhost:8080\u65f6\uff0c\u60a8\u5c06\u770b\u5230\u4e0e\u5148\u524d\u76f8\u540c\u7684\u88c5\u9970\u6309\u94ae\u88ab\u663e\u793a\u51fa\u6765\u3002<\/p>\n<h2>\u5bfc\u822a<\/h2>\n<p>\u5728React Router\u4e2d\uff0c\u5f53\u6211\u4eec\u5728\u666e\u901a\u7684\u4f7f\u7528\u65b9\u5f0f\u4e0b\u6309\u4e0b\u6bcf\u4e2a\u6309\u94ae\u5e76\u4e14\u8def\u5f84\u6539\u53d8\u65f6\uff0c\u663e\u793a\u7684\u72b6\u6001\u4e5f\u4f1a\u5728\u6d4f\u89c8\u5668\u7684\u5386\u53f2\u8bb0\u5f55\u4e2d\u4fdd\u5b58\u3002\u56e0\u6b64\uff0c\u5f53\u6211\u4eec\u6309\u4e0b\u67d0\u4e2a\u6309\u94ae\u7136\u540e\u6309\u4e0b\u6d4f\u89c8\u5668\u7684\u8fd4\u56de\u6309\u94ae\u65f6\uff0c\u53ef\u4ee5\u786e\u8ba4\u8fd4\u56de\u5230\u524d\u4e00\u4e2a\u72b6\u6001\u3002\u7531\u4e8e\u6211\u4eec\u6b63\u5728\u6784\u5efa\u7684\u5e94\u7528\u662f\u5355\u9875\u9762\u5e94\u7528\u7a0b\u5e8f\uff08SPA\uff09\uff0c\u6ca1\u6709\u9875\u9762\u8df3\u8f6c\uff0c\u6240\u4ee5\u6309\u4e0b\u8fd4\u56de\u6309\u94ae\u540e\uff0c\u4e0d\u4f1a\u8fd4\u56de\u5230\u5e94\u7528\u7a0b\u5e8f\u4e4b\u524d\u7684\u9875\u9762\uff08\u5728\u663e\u793ahttp:\/\/localhost:8080\u4e4b\u524d\u663e\u793a\u7684\u7f51\u7ad9\uff09\u3002<\/p>\n<p>\u8ba9\u6211\u4eec\u4f7f\u7528 navigate \u6765\u7a0d\u5fae\u7075\u6d3b\u5730\u5b9a\u5236\u4e00\u4e0b\u6b64\u5386\u53f2\u7ba1\u7406\u5668\u3002<br \/>\n\u4f46\u8981\u4f7f\u7528 react-router v4 \u5e76\u901a\u8fc7 navigate \u6765\u7ba1\u7406\u5386\u53f2\uff0c\u9700\u8981\u4f7f\u7528 withRouter\u3002<br \/>\n\u56e0\u6b64\uff0c\u4e3a\u4e86\u907f\u514d\u8fc7\u4e8e\u590d\u6742\u5316\uff0c\u9664\u975e\u6709\u7279\u6b8a\u539f\u56e0\uff0c\u6700\u597d\u8fd8\u662f\u4f7f\u7528\u9ed8\u8ba4\u8bbe\u7f6e\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">this.props.history \u306e\u95a2\u6570\u4e00\u89a7<\/ul>\n<\/li>\n<\/ul>\n<p>this.props.history.push \u753b\u9762\u9077\u79fb\u3059\u308b\u3002\u524d\u5c45\u305f\u753b\u9762\u3092\u5c65\u6b74\u306b\u8ffd\u52a0\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u623b\u308b\u30dc\u30bf\u30f3\u3067\u623b\u308c\u308b\u3088\u3046\u306b\u3059\u308b(React Router \u3067\u6a19\u6e96\u7684\u306a\u6319\u52d5)\u3002<\/p>\n<p>this.props.history.replace \u753b\u9762\u9077\u79fb\u3059\u308b\u3002\u524d\u5c45\u305f\u753b\u9762\u3092\u7f6e\u63db\u3059\u308b\u305f\u3081\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u623b\u308b\u30dc\u30bf\u30f3\u3067\u623b\u308c\u306a\u3044\u3002<\/p>\n<p>\u5047\u8bbe\u6211\u4eec\u4f7f\u7528this.props.history.push\uff0c\u90a3\u4e48\u4ee3\u7801\u5982\u4e0b\u6240\u793a\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">-<\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span><span class=\"p\">,<\/span> <span class=\"nx\">withRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span> \r\n<span class=\"hdl\"><span class=\"o\">-<\/span><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+<\/span><span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"nf\">navigate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">);<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"p\">}<\/span>\r\n<\/span>   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-info<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">navigate<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">featured<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<span class=\"hdl\"><span class=\"o\">-<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">withRouter<\/span><span class=\"p\">(<\/span><span class=\"nx\">Layout<\/span><span class=\"p\">);<\/span>\r\n<\/span><\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/59-0.gif\" alt=\"React_ReactRouter0004.gif\" \/><\/div>\n<p>\u5f53\u67e5\u770b\u7f51\u9875\u65f6&#8230;<\/p>\n<p>\u70b9\u51fb\u300c\u5b58\u6863\u300d -&gt; \u70b9\u51fb\u300c\u7cbe\u9009\u300d -&gt; \u70b9\u51fb\u300c\u8bbe\u7f6e\u300d -&gt; \u70b9\u51fb\u8fd4\u56de\u6309\u94ae\uff08\u8fd4\u56de\u5230\u300c\u7cbe\u9009\u300d\uff09 -&gt; \u70b9\u51fb\u8fd4\u56de\u6309\u94ae\uff08\u8fd4\u56de\u5230\u300c\u5b58\u6863\u300d\uff09-&gt; \u70b9\u51fb\u8fd4\u56de\u6309\u94ae\uff08\u8fd4\u56de\u5230\u521d\u59cb\u9875\u9762\uff09\uff0c\u8fd9\u6837\u5c31\u786e\u8ba4\u4e86 push \u548c pop \u5230\u5386\u53f2\u8bb0\u5f55\u4e2d\u3002<br \/>\n\u63a5\u4e0b\u6765\uff0c\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528 this.props.history.replace() \u5b9e\u73b0\u4e0d\u7559\u4e0b\u6d4f\u89c8\u8bb0\u5f55\u7684\u8f6c\u573a\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span><span class=\"p\">,<\/span> <span class=\"nx\">withRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n<span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">navigate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">);<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">.<\/span><span class=\"nf\">replace<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n<\/span>   <span class=\"p\">}<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-info<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">navigate<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">featured<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n \r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">withRouter<\/span><span class=\"p\">(<\/span><span class=\"nx\">Layout<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/63-0.gif\" alt=\"React_ReactRouter0004_02.gif\" \/><\/div>\n<p>\u5982\u679c\u6309\u7167\u4e0a\u8ff0\u65b9\u6cd5\u64cd\u4f5c\uff0c\u53ef\u4ee5\u770b\u5230\u5f53\u6309\u4e0bfeatured\u6309\u94ae\u65f6\uff0c\u663e\u793a\u7684\u753b\u9762\uff08\u8bbe\u7f6e\uff09\u4e0d\u4f1a\u88ab\u8bb0\u5f55\u5728\u5386\u53f2\u8bb0\u5f55\u4e2d\u3002\u8bf7\u6ce8\u610f\uff0c\u8fd9\u5e76\u4e0d\u610f\u5473\u7740featured\u753b\u9762\u7684\u5386\u53f2\u8bb0\u5f55\u6d88\u5931\u4e86\u3002<br \/>\n\u56e0\u6b64\uff0c\u5982\u679c\u60a8\u4e0d\u60f3\u5728\u5355\u51fb\u6309\u94ae\u65f6\u5c06\u5176\u4fdd\u7559\u5728\u6d4f\u89c8\u5668\u7684\u5386\u53f2\u8bb0\u5f55\u4e2d\uff0c\u8bf7\u4f7f\u7528this.props.history.replace(&#8220;\/&#8221;);\u3002<\/p>\n<p>\u987a\u4fbf\u63d0\u4e00\u4e0b\uff0c\u5728\u8fd9\u91cc\u8fdb\u884c\u7684\u72b6\u6001\u66f4\u6539\uff0c\u8bf7\u786e\u4fdd\u5728\u8fdb\u884c\u4e0b\u4e00\u8bfe\u4e4b\u524d\u5c06\u5176\u6062\u590d\u5230\u539f\u6765\u7684\u72b6\u6001\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">-<\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span><span class=\"p\">,<\/span> <span class=\"nx\">withRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span> \r\n<span class=\"hdl\"><span class=\"o\">-<\/span><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+<\/span><span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n<\/span>   <span class=\"nf\">navigate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">);<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">.<\/span><span class=\"nf\">replace<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n<\/span>   <span class=\"p\">}<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-info<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">navigate<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">featured<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n \r\n<span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">withRouter<\/span><span class=\"p\">(<\/span><span class=\"nx\">Layout<\/span><span class=\"p\">);<\/span>\r\n<\/span><\/code><\/pre>\n<h2>\u83b7\u53d6URL\u7684\u53c2\u6570<\/h2>\n<p>\u6211\u4eec\u5c06\u5b66\u4e60\u901a\u8fc7\u4f7f\u7528Get\u53c2\u6570\u4f5c\u4e3a\u6700\u7b80\u5355\u7684\u65b9\u6cd5\u6765\u4f20\u9012\u4fe1\u606f\u5230URL\uff0c\u5e76\u4eceURL\u53c2\u6570\u4e2d\u83b7\u53d6\u4fe1\u606f\u3002<\/p>\n<p>\u5982\u679c\u8f93\u5165\u7684URL\u662fhttp:\/\/localhost:8080\/archives\/some-article\uff0c\u60f3\u8981\u83b7\u53d6&#8221;some-article&#8221;\u90e8\u5206\uff0c\u53ef\u4ee5\u7528:\u53d8\u91cf\u540d\u7684\u5f62\u5f0f\u8fdb\u884c\u83b7\u53d6\u3002<br \/>\n\u6b64\u5916\uff0c\u7531\u4e8epath=&#8221;\/archives&#8221;\u4e0epath=&#8221;\/archives\/:article&#8221;\u90e8\u5206\u5339\u914d\uff0c\u56e0\u6b64\u8bbf\u95ee\/archives\/foo\u4f4d\u7f6e\u65f6\uff0c\u4e24\u4e2a\u7ec4\u4ef6\u90fd\u4f1a\u88ab\u6e32\u67d3\u3002<br \/>\n\u56e0\u6b64\uff0c\u6211\u4eec\u5c06\u5728\u8f83\u77ed\u7684path=&#8221;\/archives&#8221;\u4e0a\u6dfb\u52a0exact\u5173\u952e\u5b57\uff0c\u4ee5\u4ec5\u5728\u5b8c\u5168\u5339\u914d\u65f6\u8fdb\u884c\u6e32\u67d3\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserRouter<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">Router<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Route<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"k\">import<\/span> <span class=\"nx\">Layout<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Layout<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Featured<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Featured<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Archives<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Archives<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Settings<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Settings<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n \r\n <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span>\r\n   <span class=\"o\">&lt;<\/span><span class=\"nx\">Router<\/span><span class=\"o\">&gt;<\/span>\r\n     <span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">exact<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Featured<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Archives<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">exact<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Archives<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives\/:article<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Archives<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Settings<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Layout<\/span><span class=\"err\">&gt;<\/span>\r\n   <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Router&gt;<\/span><span class=\"err\">,<\/span>\r\n <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u901a\u8fc7\u5c06\u4e2d\u7684Get\u53c2\u6570\u7684\u503c\u8bbe\u7f6e\u4e3a\u6b64\u503c\uff0c\u53ef\u4ee5\u5c06\/archives\u4e4b\u540e\u7684\u503c\u4f20\u9012\u5230Archives\u7ec4\u4ef6\u4e2d\u3002<\/p>\n<p>\u5728\u4e0a\u8ff0\u7684\u793a\u4f8b\u4e2d\uff0c\u53ef\u4ee5\u901a\u8fc7\u5728Archives\u7ec4\u4ef6\u5185\u4f7f\u7528this.props.match.params.article\u6765\u83b7\u53d6\u53c2\u6570\uff08\u5982\u679c\u5728Archives\u7ec4\u4ef6\u4e2d\u4e0d\u6e05\u695a\u53c2\u6570\u662f\u4f7f\u7528\u4ec0\u4e48\u53c2\u6570\u540d\u4f20\u9012\u7684\uff0c\u53ef\u4ee5\u4f7f\u7528console.log(this.props);\u6765\u67e5\u770b\u4f20\u9012\u7684\u53c2\u6570\u5217\u8868\u8fdb\u884c\u786e\u8ba4\uff09\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Archives<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nc\">Archives <\/span><span class=\"p\">({<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">match<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">article<\/span><span class=\"p\">})<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5728Layout.js\u4e2d\u6dfb\u52a0\u94fe\u63a5\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span><span class=\"p\">,<\/span> <span class=\"nx\">withRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">navigate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">);<\/span>\r\n     <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives\/some-other-articles<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-warning<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nf\">archives <\/span><span class=\"p\">(<\/span><span class=\"nx\">some<\/span> <span class=\"nx\">other<\/span> <span class=\"nx\">articles<\/span><span class=\"p\">)<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-info<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">navigate<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">feathred<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">withRouter<\/span><span class=\"p\">(<\/span><span class=\"nx\">Layout<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u8bf7\u4f7f\u7528Web\u6d4f\u89c8\u5668\u6253\u5f00http:\/\/localhost:8080\uff0c\u5e76\u70b9\u51fb&#8221;archives&#8221;\uff08\u4e00\u4e9b\u5176\u4ed6\u6587\u7ae0\uff09\u548c&#8221;archives&#8221;\u94fe\u63a5\u8fdb\u884c\u5c1d\u8bd5\u3002<br \/>\n\u5f53\u70b9\u51fb\u7b2c\u4e00\u4e2a\u94fe\u63a5\u65f6\uff0c\u9875\u9762\u8df3\u8f6c\u81f3http:\/\/localhost:8080\/archives\/some-other-articles\uff0c\u5e76\u5728\u9875\u9762\u4e0a\u663e\u793a\u53c2\u6570\uff08some-other-articles\uff09\uff1b<br \/>\n\u5f53\u70b9\u51fb\u7b2c\u4e8c\u4e2a\u94fe\u63a5\u65f6\uff0c\u9875\u9762\u8df3\u8f6c\u81f3http:\/\/localhost:8080\/archives\uff0c\u5e76\u663e\u793a\u7a7a\u53c2\u6570\uff08\uff09\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/76-0.gif\" alt=\"React_ReactRouter0005.gif\" \/><\/div>\n<h2>\u4f7f\u7528\u6b63\u5219\u8868\u8fbe\u5f0f\u6307\u5b9aURL\u53c2\u6570<\/h2>\n<p>\u53ef\u4ee5\u4f7f\u7528\u6b63\u5219\u8868\u8fbe\u5f0f\u6307\u5b9a\u8981\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\u7684\u53c2\u6570\u540d\u3002\u4f8b\u5982\uff0c\u4e0b\u9762\u7684\u4f8b\u5b50\u53ef\u4ee5\u5b9a\u4e49\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u5728\u8def\u5f84\u503c\u4e3a&#8221;\/settings\/main&#8221;\u6216&#8221;\/settings\/extra&#8221;\u4e14\u53d8\u91cf\u540d\u4e3athis.props.match.params.mode\u65f6\u624d\u4f1a\u751f\u6548\u7684Settings\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserRouter<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">Router<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Route<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"k\">import<\/span> <span class=\"nx\">Layout<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Layout<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Featured<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Featured<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Archives<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Archives<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Settings<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/pages\/Settings<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n \r\n <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span>\r\n   <span class=\"o\">&lt;<\/span><span class=\"nx\">Router<\/span><span class=\"o\">&gt;<\/span>\r\n     <span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">exact<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Featured<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives\/:article<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Archives<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Settings<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings\/:mode(main|extra)<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">component<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Settings<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/Route<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Layout<\/span><span class=\"err\">&gt;<\/span>\r\n   <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Router&gt;<\/span><span class=\"err\">,<\/span>\r\n <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u6839\u636e\u4ee5\u4e0a\u5b9a\u4e49\uff0c\u53ef\u4ee5\u5728Settings\u7ec4\u4ef6\u4e2d\u901a\u8fc7this.props.match.params.mode\u6765\u5f15\u7528\u503c\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Settings<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"kd\">const<\/span> <span class=\"nx\">type<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">match<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">mode<\/span> <span class=\"o\">==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">extra<\/span><span class=\"dl\">\"<\/span><span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\"> (for experts)<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\r\n<\/span>     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Settings<\/span><span class=\"p\">{<\/span><span class=\"nx\">type<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5728 &#8220;\u8bbe\u7f6e\/\u4e3b\u8981&#8221; \u548c &#8220;\u8bbe\u7f6e\/\u989d\u5916&#8221; \u6dfb\u52a0\u6309\u94ae\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span><span class=\"p\">,<\/span> <span class=\"nx\">withRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">navigate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">);<\/span>\r\n     <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives\/some-other-articles<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-warning<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nf\">archives <\/span><span class=\"p\">(<\/span><span class=\"nx\">some<\/span> <span class=\"nx\">other<\/span> <span class=\"nx\">articles<\/span><span class=\"p\">)<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings\/main<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings\/extra<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nf\">settings <\/span><span class=\"p\">(<\/span><span class=\"nx\">extra<\/span><span class=\"p\">)<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-info<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">navigate<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">feathred<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">withRouter<\/span><span class=\"p\">(<\/span><span class=\"nx\">Layout<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u6253\u5f00\u9875\u9762\uff0c\u7136\u540e\u70b9\u51fb\u8bbe\u7f6e\u3001\u8bbe\u7f6e\uff08\u989d\u5916\uff09\u6309\u94ae\u8bd5\u8bd5\u770b\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/85-0.gif\" alt=\"React_ReactRouter0007.gif\" \/><\/div>\n<p>\u6839\u636e\u524d\u9762\u6240\u8ff0, \u53ef\u4ee5\u770b\u51fa this.props.match.param.mode \u63a5\u6536\u5230\u4e86 main \u548c extra \u4e24\u4e2a\u503c\u3002<br \/>\n\u53e6\u5916\uff0c\u5728 client.js \u4e2d\u4f7f\u7528\u4e86 \u7684\u5199\u6cd5\uff0c\u4f46\u5982\u679c\u4f20\u9012\u7684\u503c\u65e2\u4e0d\u662f main \u4e5f\u4e0d\u662f extra\uff0c\u5219\u4e0d\u4f1a\u6e32\u67d3 Settings \u7ec4\u4ef6\u3002<\/p>\n<h2>\u83b7\u53d6\u67e5\u8be2\u5b57\u7b26\u4e32<\/h2>\n<p>\u4ee5\u4e0b\u662f\u6709\u5173\u5982\u4f55\u5728React Router\u4e2d\u5904\u7406\u67e5\u8be2\u5b57\u7b26\u4e32\u7684\u4ecb\u7ecd\u3002<\/p>\n<p>\u5f53\u6211\u4eec\u5728\u6d4f\u89c8\u5668\u4e2d\u8f93\u5165URL http:\/\/localhost:8080\/archives?date=today&amp;filter=hot \u65f6\uff0c\u67e5\u8be2\u5b57\u7b26\u4e32\u6307\u7684\u662f\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7684?key=value\u4e2d\u7684\u503c\u3002<\/p>\n<p>\u7136\u800c\uff0c\u636e\u6211\u4e86\u89e3\uff0cReact Router v4 \u5df2\u7ecf\u5220\u9664\u4e86\u89e3\u6790\u8fd9\u4e2a\u67e5\u8be2\u5b57\u7b26\u4e32\u7684\u65b9\u6cd5\u3002<\/p>\n<ul class=\"post-ul\">https:\/\/github.com\/ReactTraining\/react-router\/issues\/4410<\/ul>\n<p>\u56e0\u6b64\uff0c\u4eceReact Router v4\u5f00\u59cb\uff0c\u60a8\u9700\u8981\u81ea\u884c\u89e3\u6790\u67e5\u8be2\u5b57\u7b26\u4e32\uff0c\u4f46\u5728\u8fd9\u91cc\u6211\u4eec\u5c06\u4ecb\u7ecd\u4f7f\u7528URLSearchParams\u7684\u65b9\u6cd5\u3002<br \/>\n\u9996\u5148\uff0c\u5728\u4e3b\u9875\u4e0a\u6dfb\u52a0\u4e00\u4e2a\u5305\u542b\u67e5\u8be2\u5b57\u7b26\u4e32\u7684\u94fe\u63a5\u6309\u94ae\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span><span class=\"p\">,<\/span> <span class=\"nx\">withRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">navigate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">);<\/span>\r\n     <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives\/some-other-articles<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-warning<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nf\">archives <\/span><span class=\"p\">(<\/span><span class=\"nx\">some<\/span> <span class=\"nx\">other<\/span> <span class=\"nx\">articles<\/span><span class=\"p\">)<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives\/some-other-articles?date=yesterday&amp;filter=none<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-warning<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nf\">archives <\/span><span class=\"p\">(<\/span><span class=\"nx\">some<\/span> <span class=\"nx\">other<\/span> <span class=\"nx\">articles<\/span><span class=\"p\">)<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives?date=today&amp;filter=hot<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings\/main<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings\/extra<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nf\">settings <\/span><span class=\"p\">(<\/span><span class=\"nx\">extra<\/span><span class=\"p\">)<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-info<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">navigate<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">feathred<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">withRouter<\/span><span class=\"p\">(<\/span><span class=\"nx\">Layout<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u7136\u540e\uff0c\u6211\u4eec\u5c06\u89e3\u6790\u5b58\u6863\u7ec4\u4ef6\u7684\u67e5\u8be2\u5b57\u7b26\u4e32\uff0c\u5e76\u5c06\u7ed3\u679c\u663e\u793a\u5728\u5c4f\u5e55\u4e0a\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n \r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Archives<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"kd\">const<\/span> <span class=\"nx\">query<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">URLSearchParams<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">search<\/span><span class=\"p\">)<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"kd\">let<\/span> <span class=\"nx\">message<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">match<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">article<\/span> <span class=\"p\">?<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">match<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">article<\/span> <span class=\"o\">+<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">, <\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">+<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">date=<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">query<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">date<\/span><span class=\"dl\">\"<\/span><span class=\"p\">)<\/span> <span class=\"o\">+<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">, filter=<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">query<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">filter<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n<\/span>     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nc\">Archives <\/span><span class=\"p\">({<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">match<\/span><span class=\"p\">.<\/span><span class=\"nx\">params<\/span><span class=\"p\">.<\/span><span class=\"nx\">article<\/span><span class=\"p\">})<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nc\">Archives <\/span><span class=\"p\">({<\/span><span class=\"nx\">message<\/span><span class=\"p\">})<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/95-0.gif\" alt=\"React_ReactRouter0009.gif\" \/><\/div>\n<p>\u4f7f\u7528React Router v4\u4e4b\u540e\uff0c\u4ecd\u7136\u53ef\u4ee5\u901a\u8fc7URLSearchParams\u65b9\u6cd5\u8f7b\u677e\u83b7\u53d6\u67e5\u8be2\u53c2\u6570\u3002<\/p>\n<h2>\u5907\u6ce8\uff1a\u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u652f\u6301URLSearchParams<\/h2>\n<p>\u5f53\u6d4f\u89c8\u5668\u4e0d\u652f\u6301URLSearchParams\u65f6<\/p>\n<p>\u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u652f\u6301URLSearchParams\uff0c\u5219\u8fd8\u53ef\u4ee5\u4f7f\u7528query-string\u5e93\u6765\u89e3\u6790\u3002\u8be6\u7ec6\u8bf4\u660e\u7565\u3002<\/p>\n<h2>\u5f53\u6309\u94ae\u5904\u4e8e\u6fc0\u6d3b\u72b6\u6001\u65f6\uff0c\u6307\u5b9aclass\u4e3aactiveClassName\u3002<\/h2>\n<p>\u4f7f\u7528 NavLink \u7ec4\u4ef6\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528 activeClassName \u5c5e\u6027\u6765\u6307\u5b9a\u5728\u76f8\u5e94\u7684\u94fe\u63a5\u663e\u793a\u65f6\u5e94\u7528\u7684 HTML \u7c7b\u503c\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">-<\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span><span class=\"p\">,<\/span> <span class=\"nx\">withRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NavLink<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Link<\/span><span class=\"p\">,<\/span> <span class=\"nx\">withRouter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span> \r\n <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nf\">navigate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">);<\/span>\r\n     <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">history<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n   <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">KillerNews<\/span><span class=\"p\">.<\/span><span class=\"nx\">net<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives\/some-other-articles?date=yesterday&amp;filter=none<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-warning<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nf\">archives <\/span><span class=\"p\">(<\/span><span class=\"nx\">some<\/span> <span class=\"nx\">other<\/span> <span class=\"nx\">articles<\/span><span class=\"p\">)<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives?date=today&amp;filter=hot<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings\/main<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">NavLink<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings\/main<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">activeClassName<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn-danger<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/NavLink<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings\/extra<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-success<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nf\">settings <\/span><span class=\"p\">(<\/span><span class=\"nx\">extra<\/span><span class=\"p\">)<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-info<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">navigate<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">feathred<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">withRouter<\/span><span class=\"p\">(<\/span><span class=\"nx\">Layout<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/102-0.gif\" alt=\"React_ReactRouter0011.gif\" \/><\/div>\n<p>\u5927\u81f4\u4e0a\uff0c\u6211\u5011\u5df2\u7d93\u89e3\u91cb\u4e86\u4ee5\u4e0a\u95dc\u65bcReact Router\u7684\u57fa\u672c\u529f\u80fd\u3002<br \/>\n\u4e0b\u4e00\u6b65\u5c07\u5d4c\u5165\u975c\u614bHTML\u9801\u9762\u5230React\u7684JSX\u4e2d\uff0c\u5b8c\u6210\u61c9\u7528\u7a0b\u5f0f\u7684\u5efa\u7acb\u3002<\/p>\n<p>\u6211\u5df2\u7ecf\u5c06\u81f3\u6b64\u7684\u6e90\u4ee3\u7801\u5b58\u50a8\u5728\u4ee5\u4e0b\u4ee3\u7801\u5e93\u4e2d\uff0c\u5e0c\u671b\u5bf9\u60a8\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n<ul class=\"post-ul\">https:\/\/github.com\/TsutomuNakamura\/my-react-js-tutorials\/tree\/master\/2-react-router\/01_active_class_name<\/ul>\n<h2>\u9644\u6ce8\uff1a\u5173\u4e8e\u5305\u542b\u67e5\u8be2\u5b57\u7b26\u4e32\u7684\u60c5\u51b5\u4e0bactiveClassName\u7684\u884c\u4e3a<\/h2>\n<p>\u5982\u679c NavLink \u7684 to \u5c5e\u6027\u5305\u542b\u67e5\u8be2\u5b57\u7b26\u4e32\uff0c\u5219 activeClassName \u6307\u5b9a\u7684 class \u4e0d\u4f1a\u6b63\u786e\u53cd\u6620\u3002\u8fd9\u4e0d\u662f\u4e00\u4e2a\u9519\u8bef\uff0c\u800c\u662f\u56e0\u4e3a\u4ece React Router v4 \u5f00\u59cb\uff0c\u79fb\u9664\u4e86\u5bf9\u67e5\u8be2\u5b57\u7b26\u4e32\u7684\u529f\u80fd\u3002<\/p>\n<ul class=\"post-ul\">https:\/\/github.com\/ReactTraining\/react-router\/issues\/5379<\/ul>\n<h2>\u5c06HTML\u9759\u6001\u5185\u5bb9\u7ec4\u4ef6\u5316<\/h2>\n<p>\u6211\u4eec\u5c06\u628a src\/index.html \u4e2d\u7684\u9759\u6001\u5185\u5bb9\u79fb\u52a8\u5230\u5404\u4e2a React \u7ec4\u4ef6\u4e2d\u3002<br \/>\n\u7531\u4e8e\u672c\u6b21\u64cd\u4f5c\u6b65\u9aa4\u7e41\u7410\uff0c\u6211\u4eec\u5c06\u53ea\u5173\u6ce8\u6ce8\u91cd\u70b9\uff0c\u6839\u636e\u73b0\u6709\u7684\u5185\u5bb9\u9010\u6b65\u8fdb\u884c\u3002<\/p>\n<ul class=\"post-ul\">https:\/\/github.com\/TsutomuNakamura\/my-react-js-tutorials\/tree\/master\/2-react-router\/02_migrate_html_to_react\/react_router<\/ul>\n<p>\u79fb\u884c\u540e\uff0csrc\/index.html \u4e2d\u7684\u5185\u5bb9\u53d8\u5f97\u66f4\u52a0\u6e05\u6670\u3002\u6211\u4eec\u5c06\u5728\u4ee5\u4e0b\u7684<\/p>\n<div id=\"app\"><\/div>\n<p>\u4e2d\u4ee5\u7ec4\u4ef6\u5316\u7684\u5f62\u5f0f\u5c55\u793a\u548c\u5448\u73b0\u6570\u636e\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"nt\">&lt;html<\/span> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;head&gt;<\/span>\r\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">charset=<\/span><span class=\"s\">\"utf-8\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">http-equiv=<\/span><span class=\"s\">\"X-UA-Compatible\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"IE=edge\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"description\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"author\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;title&gt;<\/span>React<span class=\"nt\">&lt;\/title&gt;<\/span>\r\n  <span class=\"c\">&lt;!-- Bootstrap Core CSS --&gt;<\/span>\r\n  <span class=\"nt\">&lt;link<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/maxcdn.bootstrapcdn.com\/bootswatch\/3.3.6\/cerulean\/bootstrap.min.css\"<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span><span class=\"nt\">&gt;<\/span>\r\n\r\n  <span class=\"c\">&lt;!-- Custom Fonts --&gt;<\/span>\r\n  <span class=\"c\">&lt;!-- &lt;link href=\"font-awesome\/css\/font-awesome.min.css\" rel=\"stylesheet\" type=\"text\/css\"&gt; --&gt;<\/span>\r\n  <span class=\"nt\">&lt;link<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"http:\/\/fonts.googleapis.com\/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic\"<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"text\/css\"<\/span><span class=\"nt\">&gt;<\/span>\r\n<span class=\"nt\">&lt;\/head&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;body&gt;<\/span>\r\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"app\"<\/span><span class=\"nt\">&gt;&lt;\/div&gt;<\/span>\r\n  <span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"\/client.min.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n<span class=\"nt\">&lt;\/body&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;\/html&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u5728src\/js\/components\/Article.js\u4e2d\uff0c\u8bbe\u7f6e\u6587\u7ae0\u6a21\u677f\uff0c\u5e76\u5728src\/js\/pages\/Featured.js\u4e2d\u8bbe\u7f6e\u6807\u9898\uff0c\u4ee5\u663e\u793a\u6bcf\u7bc7\u6587\u7ae0\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Article<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">title<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">;<\/span>\r\n\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">col-md-4<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">h4<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h4<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Lorem<\/span> <span class=\"nx\">ipsum<\/span> <span class=\"nx\">dolor<\/span> <span class=\"nx\">sit<\/span> <span class=\"nx\">amet<\/span><span class=\"p\">,<\/span> <span class=\"nx\">consectetur<\/span> <span class=\"nx\">adipisicing<\/span> <span class=\"nx\">elit<\/span><span class=\"p\">.<\/span> <span class=\"nx\">Saepe<\/span> <span class=\"nx\">rem<\/span> <span class=\"nx\">nisi<\/span> <span class=\"nx\">accusamus<\/span> <span class=\"nx\">error<\/span> <span class=\"nx\">velit<\/span> <span class=\"nx\">animi<\/span> <span class=\"nx\">non<\/span> <span class=\"nx\">ipsa<\/span> <span class=\"nx\">placeat<\/span><span class=\"p\">.<\/span> <span class=\"nx\">Recusandae<\/span><span class=\"p\">,<\/span> <span class=\"nx\">suscipit<\/span><span class=\"p\">,<\/span> <span class=\"nx\">soluta<\/span> <span class=\"nx\">quibusdam<\/span> <span class=\"nx\">accusamus<\/span> <span class=\"nx\">a<\/span> <span class=\"nx\">veniam<\/span> <span class=\"nx\">quaerat<\/span> <span class=\"nx\">eveniet<\/span> <span class=\"nx\">eligendi<\/span> <span class=\"nx\">dolor<\/span> <span class=\"nx\">consectetur<\/span><span class=\"p\">.<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">a<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">btn btn-default<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">#<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">More<\/span> <span class=\"nx\">Info<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/a<\/span><span class=\"err\">&gt;\r\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Article<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/components\/Article<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Featured<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">Articles<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Some Article<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Some Other Article<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Yet Another Article<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Still More<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Some Article<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Some Other Article<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Yet Another Article<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Still More<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Some Article<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Some Other Article<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Yet Another Article<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Still More<\/span><span class=\"dl\">\"<\/span>\r\n    <span class=\"p\">].<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">title<\/span><span class=\"p\">,<\/span> <span class=\"nx\">i<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">Article<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">i<\/span><span class=\"p\">}<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/&gt;<\/span><span class=\"se\">)<\/span><span class=\"err\">;\r\n<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">adText<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Ad spot #1<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Ad spot #2<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Ad spot #3<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Ad spot #4<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Ad spot #5<\/span><span class=\"dl\">\"<\/span>\r\n    <span class=\"p\">];<\/span>\r\n\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">randomAd<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">adText<\/span><span class=\"p\">[<\/span><span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nf\">round<\/span><span class=\"p\">(<\/span><span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nf\">random<\/span><span class=\"p\">()<\/span> <span class=\"o\">*<\/span> <span class=\"p\">(<\/span><span class=\"nx\">adText<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">))];<\/span>\r\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">featured<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">row<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">col-lg-12<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">well text-center<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n              <span class=\"p\">{<\/span><span class=\"nx\">randomAd<\/span><span class=\"p\">}<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">row<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">Articles<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5728src\/js\/components\/layout\/Nav.js\u4e2d\uff0c\u901a\u8fc7\u83b7\u53d6\u5f53\u524d\u663e\u793a\u7684\u4f4d\u7f6e\u4fe1\u606f\uff0c\u4e3a\u9875\u9762\u4e0a\u90e8\u7684\u83dc\u5355\u8bbe\u7f6e\u4ec5\u6d3b\u52a8\u72b6\u6001\u7684\u6837\u5f0f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Link<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-router-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Nav<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">collapsed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span>\r\n    <span class=\"p\">};<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"nf\">toggleCollapse<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">collapsed<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">collapsed<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setState<\/span><span class=\"p\">({<\/span><span class=\"nx\">collapsed<\/span><span class=\"p\">});<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">location<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">collapsed<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">featuredClass<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">pathname<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">active<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">archivesClass<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">pathname<\/span><span class=\"p\">.<\/span><span class=\"nf\">match<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/^<\/span><span class=\"se\">\\\/<\/span><span class=\"sr\">archives\/<\/span><span class=\"p\">)<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">active<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">settingsClass<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">pathname<\/span><span class=\"p\">.<\/span><span class=\"nf\">match<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/^<\/span><span class=\"se\">\\\/<\/span><span class=\"sr\">settings\/<\/span><span class=\"p\">)<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">active<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">navClass<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">collapsed<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">collapse<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">nav<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">navbar navbar-inverse navbar-fixed-top<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">role<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">navigation<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">container<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">navbar-header<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">button<\/span><span class=\"dl\">\"<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">navbar-toggle<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">toggleCollapse<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span>\r\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">sr-only<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Toggle<\/span> <span class=\"nx\">navigation<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\r\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">icon-bar<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\r\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">icon-bar<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\r\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">icon-bar<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\r\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">navbar-collapse <\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">navClass<\/span><span class=\"p\">}<\/span> <span class=\"nx\">id<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">bs-example-navbar-collapse-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">ul<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">nav navbar-nav<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">li<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">featuredClass<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">toggleCollapse<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Featured<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;\r\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/li<\/span><span class=\"err\">&gt;\r\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">li<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">archivesClass<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/archives<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">toggleCollapse<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Archives<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;\r\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/li<\/span><span class=\"err\">&gt;\r\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"nx\">li<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">settingsClass<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Link<\/span> <span class=\"nx\">to<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/settings<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">toggleCollapse<\/span><span class=\"p\">.<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Settings<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Link<\/span><span class=\"err\">&gt;\r\n<\/span>              <span class=\"o\">&lt;<\/span><span class=\"sr\">\/li<\/span><span class=\"err\">&gt;\r\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ul<\/span><span class=\"err\">&gt;\r\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/nav<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/119-0.gif\" alt=\"React_ReactRouter0012.gif\" \/><\/div>\n<h1>React Router v3 \u7684\u4e3b\u8981\u53d8\u66f4\u5185\u5bb9\u5982\u4e0b\uff1a<\/h1>\n<p>\u6700\u5f8c\uff0c\u6211\u628a\u6211\u5728\u4f7f\u7528React Router v3\u5e76\u6700\u8fd1\u5f00\u59cb\u4f7f\u7528React Router v4\u65f6\u9047\u5230\u7684\u5404\u79cd\u53d8\u5316\u603b\u7ed3\u5728\u4e0b\u9762\u7684\u7f51\u5740\u6587\u7ae0\u4e2d\u3002\u5e0c\u671b\u5bf9\u4e00\u76f4\u4f7f\u7528React Router v3\u7684\u4eba\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n<h1>\u8bf7\u62ff\u4ee5\u4e0b\u5185\u5bb9\u4f5c\u4e3a\u53c2\u8003\u3002<\/h1>\n<p>REACT JS TUTORIAL #7 &#8211; React Router Params &amp; Queries<\/p>\n<p><iframe loading=\"lazy\" title=\"REACT JS TUTORIAL #7 - React Router Params &amp; Queries\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ZBxMljq9GSE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Start Bootstrap<\/p>\n<p>https:\/\/startbootstrap.com<\/p>\n<p>BootstrapCDN<\/p>\n<p>https:\/\/www.bootstrapcdn.com\/bootswatch\/<\/p>\n<p>react router v^4.0.0 Uncaught TypeError: Cannot read property &#8216;location&#8217; of undefined<\/p>\n<p>https:\/\/stackoverflow.com\/questions\/42892488\/react-router-v4-0-0-uncaught-typeerror-cannot-read-property-location-of-unde<\/p>\n<p>Using React IndexRoute in react-router v4<\/p>\n<p>https:\/\/stackoverflow.com\/questions\/42748727\/using-react-indexroute-in-react-router-v4<\/p>\n<p>Nested Routes in React Router v4<\/p>\n<p>https:\/\/stackoverflow.com\/questions\/42095600\/nested-routes-in-react-router-v4<\/p>\n<p>Warning: Unknown DOM property class. Did you mean className?<\/p>\n<p>https:\/\/stackoverflow.com\/questions\/30968113\/warning-unknown-dom-property-class-did-you-mean-classname<\/p>\n<p>The prop &#8216;history&#8217; is marked as required in &#8216;Router&#8217;, but its value is &#8216;undefined&#8217;. in Router<\/p>\n<p>https:\/\/stackoverflow.com\/questions\/43008036\/the-prop-history-is-marked-as-required-in-router-but-its-value-is-undefine<\/p>\n<p>React Router failed prop &#8216;history&#8217;, is undefined<\/p>\n<p>https:\/\/stackoverflow.com\/questions\/42845303\/react-router-failed-prop-history-is-undefined<\/p>\n<p>React-router v4 this.props.history.push(\u2026) not working<\/p>\n<p>https:\/\/stackoverflow.com\/questions\/44312437\/react-router-v4-this-props-history-push-not-working\/44312810<\/p>\n<p>How to push to History in React Router v4?<\/p>\n<p>https:\/\/stackoverflow.com\/questions\/42701129\/how-to-push-to-history-in-react-router-v4<\/p>\n<p>Migrating from v2\/v3 to v4<\/p>\n<p>https:\/\/github.com\/ReactTraining\/react-router\/blob\/master\/packages\/react-router\/docs\/guides\/migrating.md<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5bfc\u5f15\u9875 \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React \u306e\u57fa\u672c \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React Rou [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38145","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Router \u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/react-router-\u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Router \u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb\" \/>\n<meta property=\"og:description\" content=\"\u5bfc\u5f15\u9875 \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React \u306e\u57fa\u672c \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React Rou [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/react-router-\u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-02T16:02:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-04T03:44:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/19-0.png\" \/>\n<meta name=\"author\" content=\"\u9038, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u9038, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/\",\"name\":\"React Router \u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-06-02T16:02:41+00:00\",\"dateModified\":\"2024-05-04T03:44:55+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Router \u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<meta property=\"og:video\" content=\"https:\/\/www.youtube.com\/embed\/ZBxMljq9GSE\" \/>\n<meta property=\"og:video:type\" content=\"text\/html\" \/>\n<meta property=\"og:video:duration\" content=\"432\" \/>\n<meta property=\"og:video:width\" content=\"480\" \/>\n<meta property=\"og:video:height\" content=\"270\" \/>\n<meta property=\"ya:ovs:adult\" content=\"false\" \/>\n<meta property=\"ya:ovs:upload_date\" content=\"2023-06-02T16:02:41+00:00\" \/>\n<meta property=\"ya:ovs:allow_embed\" content=\"true\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Router \u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/react-router-\u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"React Router \u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb","og_description":"\u5bfc\u5f15\u9875 \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React \u306e\u57fa\u672c \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React Rou [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/react-router-\u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-06-02T16:02:41+00:00","article_modified_time":"2024-05-04T03:44:55+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d325e37434c4406c61d63\/19-0.png"}],"author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/","name":"React Router \u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-06-02T16:02:41+00:00","dateModified":"2024-05-04T03:44:55+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"React Router \u5165\u95e8\u4ece\u73b0\u5728\u5f00\u59cb"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/react-router-%e5%85%a5%e9%97%a8%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]},"og_video":"https:\/\/www.youtube.com\/embed\/ZBxMljq9GSE","og_video_type":"text\/html","og_video_duration":"432","og_video_width":"480","og_video_height":"270","ya_ovs_adult":"false","ya_ovs_upload_date":"2023-06-02T16:02:41+00:00","ya_ovs_allow_embed":"true"},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38145"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38145\/revisions"}],"predecessor-version":[{"id":98126,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38145\/revisions\/98126"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}