主页（一）-菜单与路由配置——全局路由配置-App.js导入相关组件 & 主页子路由配置-src下新建视图文件夹views-其下是单页面组件

本文链接：https://blog.csdn.net/weixin_44867717/article/details/113821502

菜单与路由配置——全局路由配置-App.js导入相关组件 & 主页子路由配置-src下新建视图文件夹views-其下是单页面组件

全局路由配置

安装路由依赖包

yarn add react-router-dom

导入相关组件-App.js

import { BrowserRouter as Router, Route } from 'react-router-dom'

配置全局路由

<Router>
  {/*配置全局路由映射*/}
  <Switch>
    <Redirect exact from='/' to='/home'/>
    <Route path='/home' component={Home}/>
    <Route path='/login' component={Login}/>
    <Route path='/citylist' component={List}/>
    <Route component={NotMatch}/>
  </Switch>
</Router>

实例

第一步：安装路由依赖包

yarn add react-router-dom

第二步：src/App.js文件如下

import React from 'react';
import './App.css';
// import { Button } from 'antd-mobile'
import 'antd-mobile/dist/antd-mobile.css'
// 配置整体路由
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'

import Login from './views/login/Login.js'
import Home from './views/home/Home.js'

// function Login () {
//   return <div>Login</div>
// }

// function Home () {
//   return <div>Home</div>
// }


function NotFound () {
  return <div>没有该页面</div>
}

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/login' component={Login}/>
        <Route path='/home' component={Home}/>
        <Redirect exact from='/' to='/home'/>
        <Route component={NotFound}/>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

主页子路由配置

配置主页菜单子路由

{/*菜单相应显示内容的填充位*/}
<Route path='/home/index' component={Index}/>
<Route path='/home/find' component={Find}/>
<Route path='/home/info' component={Info}/>
<Route path='/home/my' component={My}/>
{/*菜单链接*/}
<Link to='/home/index'>首页</Link>
<Link to='/home/find'>找房</Link>
<Link to='/home/info'>资讯</Link>
<Link to='/home/my'>我的</Link>

实例

第一步：在src下新建views视图文件夹

第二步：在views文件夹下，新建login文件夹，在其下新建Login.js文件

import React from 'react'

class Login extends React.Component {
  render () {
    return (
      <div>
        登录
      </div>
    )
  }
}

export default Login

第三步：在views文件夹下，新建home文件夹，在其下新建Home.js文件

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'

function Index () {
  return <div>Index</div>
}
function Find () {
  return <div>Find</div>
}
function Info () {
  return <div>Info</div>
}
function My () {
  return <div>My</div>
}

class Home extends React.Component {
  render () {
    return (
      <div>
        {/*顶部的内容区*/}
        <Route path='/home/index' component={Index}/>
        <Route path='/home/find' component={Find}/>
        <Route path='/home/info' component={Info}/>
        <Route path='/home/my' component={My}/>
        {/*底部菜单区*/}
        <Link to='/home/index'>主页</Link>
        <Link to='/home/find'>找房</Link>
        <Link to='/home/info'>资讯</Link>
        <Link to='/home/my'>我的</Link>
      </div>
    )
  }
}

export default Home

第四步：在src/App.js进行引入

import Login from './views/login/Login.js'
import Home from './views/home/Home.js'

全文

import React from 'react';
import './App.css';
// import { Button } from 'antd-mobile'
import 'antd-mobile/dist/antd-mobile.css'
// 配置整体路由
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'

import Login from './views/login/Login.js'
import Home from './views/home/Home.js'

// function Login () {
//   return <div>Login</div>
// }

// function Home () {
//   return <div>Home</div>
// }


function NotFound () {
  return <div>没有该页面</div>
}

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/login' component={Login}/>
        <Route path='/home' component={Home}/>
        <Redirect exact from='/' to='/home'/>
        <Route component={NotFound}/>
      </Switch>
    </BrowserRouter>
  );
}

export default App;