React中配置子路由

洛锋發表於 2020-7-22 21:48:00

1、组件First.js下有子组件：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="7">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import Admin from './Admin'\nimport FormCom from './FormCom'\nimport One from './One'\nimport ButtonCom from './ButtonCom'\nimport MenuCom from './MenuCom'\nimport StepsCom from './StepsCom'\nimport TabsCom from './TabsCom'\nimport TableCom from './TableCom'\nimport MessageCom from './MessageCom'\nimport NotificationCom from './NotificationCom'\nimport ProgressCom from './ProgressCom'\nimport SpinCom from './SpinCom'\nimport BadgeCom from './BadgeCom'&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import Admin from './Admin'
import FormCom from './FormCom'
import One from './One'
import ButtonCom from './ButtonCom'
import MenuCom from './MenuCom'
import StepsCom from './StepsCom'
import TabsCom from './TabsCom'
import TableCom from './TableCom'
import MessageCom from './MessageCom'
import NotificationCom from './NotificationCom'
import ProgressCom from './ProgressCom'
import SpinCom from './SpinCom'
import BadgeCom from './BadgeCom'</code></pre>
<img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
First.js完整代码如下：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="6">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import React from 'react'\nimport { Layout, Menu } from 'antd';\nimport { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';\nimport { HashRouter, Route, Link } from 'react-router-dom'\nimport Admin from './Admin'\nimport FormCom from './FormCom'\nimport One from './One'\nimport ButtonCom from './ButtonCom'\nimport MenuCom from './MenuCom'\nimport StepsCom from './StepsCom'\nimport TabsCom from './TabsCom'\nimport TableCom from './TableCom'\nimport MessageCom from './MessageCom'\nimport NotificationCom from './NotificationCom'\nimport ProgressCom from './ProgressCom'\nimport SpinCom from './SpinCom'\nimport BadgeCom from './BadgeCom'\nconst { SubMenu } = Menu;\nconst { Header, Content, Sider } = Layout;\n\nexport default class First extends React.Component {\n constructor() {\n super();\n }\n\n //只展开当前父级菜单 begin\n rootSubmenuKeys = ['sub1', 'sub2', 'sub3'];\n\n state = {\n openKeys: ['sub1'],\n };\n\n onOpenChange = openKeys =&gt; {\n const latestOpenKey = openKeys.find(key =&gt; this.state.openKeys.indexOf(key) === -1);\n if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {\n this.setState({ openKeys });\n } else {\n this.setState({\n openKeys: latestOpenKey ? : [],\n });\n }\n };\n //只展开当前父级菜单 end\n\n render() {\n return (&lt;div&gt;\n &lt;Layout&gt;\n &lt;HashRouter&gt;\n &lt;Header className=\&quot;header\&quot; style={{ position: 'fixed', zIndex: 1, width: '100%', paddingLeft: '20px'}}&gt;\n &lt;div className=\&quot;logo\&quot; style={{fontSize: '32px', color: '#ffffff', fontWeight: 'bold'}}&gt;React App&lt;/div&gt;\n &lt;Menu theme=\&quot;dark\&quot; mode=\&quot;horizontal\&quot; defaultSelectedKeys={['1']}&gt;\n {/*&lt;Menu.Item key=\&quot;1\&quot;&gt;nav 1&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;2\&quot;&gt;nav 2&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;3\&quot;&gt;nav 3&lt;/Menu.Item&gt;*/}\n &lt;/Menu&gt;\n &lt;/Header&gt;\n &lt;Layout&gt;\n &lt;Sider width={200} className=\&quot;site-layout-background\&quot; style={{\n overflow: 'auto',\n height: '100vh',\n position: 'fixed',\n left: 0,\n }}&gt;\n &lt;Menu\n theme=\&quot;dark\&quot;\n mode=\&quot;inline\&quot;\n defaultSelectedKeys={['2']}\n defaultOpenKeys={['sub1']}\n style={{ height: '100%', paddingTop: '60px', borderRight: 0 }}\n onOpenChange={this.onOpenChange}\n openKeys={this.state.openKeys}\n &gt;\n &lt;SubMenu key=\&quot;sub1\&quot; icon={&lt;UserOutlined /&gt;} title=\&quot;subnav 1\&quot;&gt;\n &lt;Menu.Item key=\&quot;1\&quot;&gt;&lt;Link to={`${this.props.match.path}/admin`}&gt;admin&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;2\&quot;&gt;&lt;Link to={`${this.props.match.path}/form`}&gt;form&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;3\&quot;&gt;&lt;Link to={`${this.props.match.path}/one`}&gt;One&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;4\&quot;&gt;&lt;Link to={`${this.props.match.path}/menu`}&gt;Menu&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;/SubMenu&gt;\n &lt;SubMenu key=\&quot;sub2\&quot; icon={&lt;LaptopOutlined /&gt;} title=\&quot;subnav 2\&quot;&gt;\n &lt;Menu.Item key=\&quot;5\&quot;&gt;&lt;Link to={`${this.props.match.path}/step`}&gt;Step&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;6\&quot;&gt;&lt;Link to={`${this.props.match.path}/tabs`}&gt;Tabs&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;7\&quot;&gt;&lt;Link to={`${this.props.match.path}/table`}&gt;Table&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;8\&quot;&gt;&lt;Link to={`${this.props.match.path}/message`}&gt;Message&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;/SubMenu&gt;\n &lt;SubMenu key=\&quot;sub3\&quot; icon={&lt;NotificationOutlined /&gt;} title=\&quot;subnav 3\&quot;&gt;\n &lt;Menu.Item key=\&quot;9\&quot;&gt;&lt;Link to={`${this.props.match.path}/notification`}&gt;Notification&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;10\&quot;&gt;&lt;Link to={`${this.props.match.path}/progress`}&gt;ProgressCom&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;11\&quot;&gt;&lt;Link to={`${this.props.match.path}/spin`}&gt;Spin&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;12\&quot;&gt;&lt;Link to={`${this.props.match.path}/badge`}&gt;Badge&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;Menu.Item key=\&quot;13\&quot;&gt;&lt;Link to={`${this.props.match.path}/button`}&gt;Button&lt;/Link&gt;&lt;/Menu.Item&gt;\n &lt;/SubMenu&gt;\n &lt;/Menu&gt;\n &lt;/Sider&gt;\n &lt;Layout style={{ padding: '84px 20px 20px', marginLeft: 200}}&gt;\n &lt;Content\n className=\&quot;site-layout-background\&quot;\n style={{\n padding: 24,\n margin: 0\n }}\n &gt;\n &lt;Route path={`${this.props.match.path}/admin`} exact component={Admin}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/form`} component={FormCom}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/one`} component={One}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/menu`} component={MenuCom}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/step`} component={StepsCom}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/tabs`} component={TabsCom}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/table`} component={TableCom}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/message`} component={MessageCom}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/notification`} component={NotificationCom}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/progress`} component={ProgressCom}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/spin`} component={SpinCom}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/badge`} component={BadgeCom}&gt;&lt;/Route&gt;\n &lt;Route path={`${this.props.match.path}/button`} component={ButtonCom}&gt;&lt;/Route&gt;\n &lt;/Content&gt;\n &lt;/Layout&gt;\n &lt;/Layout&gt;\n &lt;/HashRouter&gt;\n &lt;/Layout&gt;\n &lt;/div&gt;)\n }\n}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import React from 'react'
import { Layout, Menu } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { HashRouter, Route, Link } from 'react-router-dom'
import Admin from './Admin'
import FormCom from './FormCom'
import One from './One'
import ButtonCom from './ButtonCom'
import MenuCom from './MenuCom'
import StepsCom from './StepsCom'
import TabsCom from './TabsCom'
import TableCom from './TableCom'
import MessageCom from './MessageCom'
import NotificationCom from './NotificationCom'
import ProgressCom from './ProgressCom'
import SpinCom from './SpinCom'
import BadgeCom from './BadgeCom'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

export default class First extends React.Component {
constructor() {
 super();
}

//只展开当前父级菜单 begin
rootSubmenuKeys = ['sub1', 'sub2', 'sub3'];

state = {
 openKeys: ['sub1'],
};

onOpenChange = openKeys => {
 const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
 if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
 this.setState({ openKeys });
 } else {
 this.setState({
 openKeys: latestOpenKey ? : [],
 });
 }
};
//只展开当前父级菜单 end

render() {
 return (<div>
 <Layout>
 <HashRouter>
 <Header className="header" style={{ position: 'fixed', zIndex: 1, width: '100%', paddingLeft: '20px'}}>
 <div className="logo" style={{fontSize: '32px', color: '#ffffff', fontWeight: 'bold'}}>React App</div>
 <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
 {/*<Menu.Item key="1">nav 1</Menu.Item>
 <Menu.Item key="2">nav 2</Menu.Item>
 <Menu.Item key="3">nav 3</Menu.Item>*/}
 </Menu>
 </Header>
 <Layout>
 <Sider width={200} className="site-layout-background" style={{
 overflow: 'auto',
 height: '100vh',
 position: 'fixed',
 left: 0,
 }}>
 <Menu
 theme="dark"
 mode="inline"
 defaultSelectedKeys={['2']}
 defaultOpenKeys={['sub1']}
 style={{ height: '100%', paddingTop: '60px', borderRight: 0 }}
 onOpenChange={this.onOpenChange}
 openKeys={this.state.openKeys}
 >
 <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
 <Menu.Item key="1"><Link to={`${this.props.match.path}/admin`}>admin</Link></Menu.Item>
 <Menu.Item key="2"><Link to={`${this.props.match.path}/form`}>form</Link></Menu.Item>
 <Menu.Item key="3"><Link to={`${this.props.match.path}/one`}>One</Link></Menu.Item>
 <Menu.Item key="4"><Link to={`${this.props.match.path}/menu`}>Menu</Link></Menu.Item>
 </SubMenu>
 <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
 <Menu.Item key="5"><Link to={`${this.props.match.path}/step`}>Step</Link></Menu.Item>
 <Menu.Item key="6"><Link to={`${this.props.match.path}/tabs`}>Tabs</Link></Menu.Item>
 <Menu.Item key="7"><Link to={`${this.props.match.path}/table`}>Table</Link></Menu.Item>
 <Menu.Item key="8"><Link to={`${this.props.match.path}/message`}>Message</Link></Menu.Item>
 </SubMenu>
 <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
 <Menu.Item key="9"><Link to={`${this.props.match.path}/notification`}>Notification</Link></Menu.Item>
 <Menu.Item key="10"><Link to={`${this.props.match.path}/progress`}>ProgressCom</Link></Menu.Item>
 <Menu.Item key="11"><Link to={`${this.props.match.path}/spin`}>Spin</Link></Menu.Item>
 <Menu.Item key="12"><Link to={`${this.props.match.path}/badge`}>Badge</Link></Menu.Item>
 <Menu.Item key="13"><Link to={`${this.props.match.path}/button`}>Button</Link></Menu.Item>
 </SubMenu>
 </Menu>
 </Sider>
 <Layout style={{ padding: '84px 20px 20px', marginLeft: 200}}>
 <Content
 className="site-layout-background"
 style={{
 padding: 24,
 margin: 0
 }}
 >
 <Route path={`${this.props.match.path}/admin`} exact component={Admin}></Route>
 <Route path={`${this.props.match.path}/form`} component={FormCom}></Route>
 <Route path={`${this.props.match.path}/one`} component={One}></Route>
 <Route path={`${this.props.match.path}/menu`} component={MenuCom}></Route>
 <Route path={`${this.props.match.path}/step`} component={StepsCom}></Route>
 <Route path={`${this.props.match.path}/tabs`} component={TabsCom}></Route>
 <Route path={`${this.props.match.path}/table`} component={TableCom}></Route>
 <Route path={`${this.props.match.path}/message`} component={MessageCom}></Route>
 <Route path={`${this.props.match.path}/notification`} component={NotificationCom}></Route>
 <Route path={`${this.props.match.path}/progress`} component={ProgressCom}></Route>
 <Route path={`${this.props.match.path}/spin`} component={SpinCom}></Route>
 <Route path={`${this.props.match.path}/badge`} component={BadgeCom}></Route>
 <Route path={`${this.props.match.path}/button`} component={ButtonCom}></Route>
 </Content>
 </Layout>
 </Layout>
 </HashRouter>
 </Layout>
 </div>)
}
}</code></pre>
<img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
其中
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="5">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;${this.props.match.path}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">${this.props.match.path}</code></pre>
<img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
是关键。
2、假设还有一个登录组件Login.js，代码如下：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="4">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import React from 'react'\nimport { Button } from 'antd';\n\nexport default class Login extends React.Component {\n constructor() {\n super();\n }\n\n redirectHandle = () =&gt; {\n console.log(\&quot;aaa\&quot;);\n this.props.history.push(\&quot;/home\&quot;);\n }\n\n render() {\n return (&lt;Button type=\&quot;primary\&quot; onClick={()=&gt;this.redirectHandle()}&gt;Primary Button&lt;/Button&gt;)\n }\n}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import React from 'react'
import { Button } from 'antd';

export default class Login extends React.Component {
constructor() {
 super();
}

redirectHandle = () => {
 console.log("aaa");
 this.props.history.push("/home");
}

render() {
 return (<Button type="primary" onClick={()=>this.redirectHandle()}>Primary Button</Button>)
}
}</code></pre>
<img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
假设React项目用的是React脚手架搭建，则在src目录下的App.js文件中设置路由：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="3">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;render() {\n return (&lt;HashRouter&gt;\n &lt;Switch&gt;\n &lt;Route exact={true} path=\&quot;/login\&quot; component={Login} /&gt;\n &lt;Route path=\&quot;/home\&quot; component={First} /&gt;\n &lt;Redirect to='/login' /&gt; {/*/login和/home之外的路由直接跳转到/login*/}\n &lt;/Switch&gt;\n &lt;/HashRouter&gt;)\n}&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">render() {
return (<HashRouter>
 <Switch>
 <Route exact={true} path="/login" component={Login} />
 <Route path="/home" component={First} />
 <Redirect to='/login' /> {/*/login和/home之外的路由直接跳转到/login*/}
 </Switch>
</HashRouter>)
}</code></pre>
<img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
App.js完整代码如下：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="2">
<pre class="cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;import React from 'react';\nimport { notification } from 'antd'\nimport { HashRouter, Route, Switch, Redirect } from 'react-router-dom';\nimport First from './First';\nimport Login from './Login';\nimport './App.css';\n\nclass App extends React.Component {\nconstructor() {\n super();\n this.openNotificationWithIcon = type =&gt; {\n notification({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n });\n }\n}\n\nclickHandle() {\n console.log(\&quot;clicked!!!\&quot;);\n}\n\nrender() {\n return (&lt;HashRouter&gt;\n &lt;Switch&gt;\n &lt;Route exact={true} path=\&quot;/login\&quot; component={Login} /&gt; {/**exact 防止混路由混合如：输入127.xx.xx.xx/home 中有/login页面*/}\n &lt;Route path=\&quot;/home\&quot; component={First} /&gt;\n &lt;Redirect to='/login' /&gt;\n &lt;/Switch&gt;\n &lt;/HashRouter&gt;)\n}\n}\n\nexport default App;&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs">import React from 'react';
import { notification } from 'antd'
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
import First from './First';
import Login from './Login';
import './App.css';

class App extends React.Component {
constructor() {
super();
this.openNotificationWithIcon = type => {
 notification({
 message: 'Notification Title',
 description:
 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
 });
}
}

clickHandle() {
console.log("clicked!!!");
}

render() {
return (<HashRouter>
 <Switch>
 <Route exact={true} path="/login" component={Login} /> {/**exact 防止混路由混合如：输入127.xx.xx.xx/home 中有/login页面*/}
 <Route path="/home" component={First} />
 <Redirect to='/login' />
 </Switch>
</HashRouter>)
}
}

export default App;</code></pre>
<img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
项目目录结构如下：
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="1"><img alt="" width="276" height="682" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20200722214617495.PNG" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20200722214617495.PNG&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;276&quot;,&quot;height&quot;:&quot;682&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20200722214617495.PNG"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
项目预览效果如下：
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="0"><img alt="" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20200722214753388.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1YW5zYW12ZQ==,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20200722214753388.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1YW5zYW12ZQ==,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;&quot;,&quot;height&quot;:&quot;&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20200722214753388.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1YW5zYW12ZQ==,size_16,color_FFFFFF,t_70"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="> 
来源：https://www.cnblogs.com/samve/p/13363356.html

頁: [1]

琼殿技术论坛's Archiver

React中配置子路由