-
海阔山遥2018-07-10 00:00
- 40
- 0
问题
做一个后台管理系统, 使用create-react-app创建项目, 在index.js里面怎么配置route, 界面是左右栏布局, 左栏是导航菜单, 导航菜单自己单独写的组件, 点击菜单右边界面有相应的跳转, 分为 NavMenuComponent, MainComponent, 我在App.js 引入这2个组件, 路由应该怎么写, 才能达到要求.
index.js 里面我是这样写的
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<AppRoute />
</BrowserRouter>,
document.getElementById("root")
);
AppRoute.js
export default class AppRoute extends React.Component {
render() {
return (
<Switch>
<Route
path="/"
component={App}
/>
</Switch>
);
}
}
App.js
<Layout style={{ minHeight: "100vh" }}>
<Sider
collapsible
collapsed={this.state.collapsed}
onCollapse={this.onCollapse}
>
<div className="logo" />
<NavMenu />
</Sider>
<Layout>
<Header style={{ background: "#fff", padding: 0 }} />
<Content style={{ margin: "0 16px" }}>
<Breadcrumb style={{ margin: "16px 0" }}>
<Breadcrumb.Item>User</Breadcrumb.Item>
<Breadcrumb.Item>Bill</Breadcrumb.Item>
</Breadcrumb>
<div style={{ padding: 24, background: "#fff", minHeight: 360 }}>
<Route render={props => <Main {...props} />} />
</div>
</Content>
<Footer style={{ textAlign: "center" }}>
Ant Design ©2016 Created by Ant UED
</Footer>
</Layout></Layout>
如果我直接引入NavMenu.js, props里面就没有history相关的属性
NavMenu.js
<Menu
theme="dark"
defaultSelectedKeys={["/promoter/list"]}
defaultOpenKeys={["/promoter"]}
mode="inline"
onSelect={this.handleMenuSelect}
>
<SubMenu
key="/promoter"
title={
<span>
<Icon type="user" />
<span>推广用户管理</span>
</span>
}
>
<Menu.Item key="/promoter/list">代理用户管理</Menu.Item>
</SubMenu>
<SubMenu
key="/rule"
title={
<span>
<Icon type="desktop" />
<span>规则管理</span>
</span>
}
>
<Menu.Item key="/rule/divide">佣金分成规则设置</Menu.Item>
</SubMenu>
</Menu>
- 共 0 条
- 全部回答
-
明月何灼灼 普通会员 1楼
在React项目中，React Router v4是一种用于管理React组件路由的库。以下是在配置React Router v4在React项目中的步骤：
- 安装React Router： 首先，你需要在你的项目中安装React Router。你可以在命令行或集成开发环境中使用以下命令：
npm install react-router-dom- 创建React Router配置文件：
在你的项目根目录下，创建一个名为
src/urls.js的文件，然后添加以下代码：
```javascript import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => { return (
} /> } /> } /> export default App; ```
- 配置Home组件：
在
src/components/Home.js中，创建一个名为Home的组件，然后添加以下代码：
```javascript import React from 'react'; import { Link } from 'react-router-dom';
const Home = () => { return (
); };Welcome to Home
This is the home page of your React app.
Learn more about us Contact usexport default Home; ```
- 配置About组件：
在
src/components/About.js中，创建一个名为About的组件，然后添加以下代码：
```javascript import React from 'react'; import { Link } from 'react-router-dom';
const About = () => { return (
); };About Us
About our company, we provide web development services for startups and small businesses. We specialize in creating custom solutions that meet your unique needs and requirements.
Our team of experts includes experienced developers, designers, and project managers who work closely with you to ensure that your project is completed on time and within budget.
View our team View our servicesexport default About; ```
- 配置Contact组件：
在
src/components/Contact.js中，创建一个名为Contact的组件，然后添加以下代码：
```javascript import React from 'react'; import { Link } from 'react-router-dom';
const Contact = () => { return (
); };Contact Us
Feel free to contact us if you have any questions or need assistance. Our team is available by phone, email, or live chat.
We appreciate your interest in our services and look forward to hearing from you.
Contact usexport default Contact; ```
- 使用React Router配置页面：
在你的React组件中，只需要在
<Switch>组件的path属性中引用对应的路由，如下所示：
```javascript import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => { return (
} /> } /> } /> export default App; ```
这将渲染一个包含三个首页、一个关于页面和一个联系页面的导航菜单，每个页面对应一个路由。当你访问
/、/about或/contact端点时，React Router会根据路由的匹配来渲染相应的页面。注意：这个配置示例假设你已经在你的React项目中创建了一个包含首页、关于页面和联系页面的组件。如果你的组件结构不同，你需要根据实际的组件配置进行相应的修改。例如，如果你的
Home组件位于src/components目录下，那么你需要在Home.js中引入Link组件，如下所示：```javascript import React from 'react'; import { Link } from 'react-router-dom';
const Home = () => { return (
); };Welcome to Home
This is the home page of your React app.
Learn more about us Contact usexport default Home; ```
然后在
src/components/About.js和src/components/Contact.js中引用Link组件：```javascript import React from 'react'; import { Link } from 'react-router-dom';
const About = () => { return (
); };About Us
About our company, we provide web development services for startups and small businesses. We specialize in creating custom solutions that meet your unique needs and requirements.
View our team View our servicesconst Contact = () => { return (
); }; ```Contact Us
Feel free to contact us if you have any questions or need assistance. Our team is available by phone, email, or live chat.
Contact us这将确保你的项目在访问
/、/about或/contact端点时，分别渲染对应的Home、About和Contact组件。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部