React路由配置

努力站桩的奶酪*

已于 2023-01-14 14:20:53 修改

阅读量211

点赞数

文章标签： react.js 前端 javascript Powered by 金山文档

于 2023-01-14 14:15:19 首次发布

本文链接：https://blog.csdn.net/weixin_52528855/article/details/128684605

版权

该文章展示了一个使用React构建的应用，包含Nav.js和Content.js组件。Nav.js中定义了导航栏，使用了react-router-dom进行路由链接，并用antd库创建了菜单。Content.js则根据路由显示对应的内容。首页和关于页面通过routes/index.js配置。

摘要由CSDN通过智能技术生成

App.js

import React from 'react';
import Content from './component/Content' //内容区域
import Nav from './component/Nav' //导航栏

function App() {

  return (
    <div className="App">
      <Nav/>
      <Content/>
    </div>
  );
}

export default App;

Nav.js（导航栏）

有home和about两个导航

import React, { useState } from 'react';
import { NavLink } from 'react-router-dom'
import { Row, Col, Menu, Button } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const items: MenuProps['items'] = [
  {
    label: (
      <NavLink to="/home">  //路由链接
        主页
      </NavLink>
    ),
    key: 'home',
  },
  {
    label: (
      <NavLink to="/about">
        关于
      </NavLink>
    ),
    key: 'about',
  },
];

function Nav() {
  const [current, setCurrent] = useState('home');
  const onClick: MenuProps['onClick'] = e => {
    console.log('click ', e);
    setCurrent(e.key);
  };

  return(
    <div className='header_nav'>
      <Row justify="space-around" align="middle">
        <Col span={12}>
          {/* 头部logo */}
          <div className='header_logo'>
            <img src={require('')} alt="" />
          </div>
        </Col>
        <Col span={9}>
          {/* 路由链接 */}
          {/* 头部导航栏 */}
          <div className='navigation'>
            <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
          </div>

        </Col>
        <Col span={3}>
          <div className='header_personal'>
            <Button shape="round" icon={<UserOutlined />}>
              登录/注册
            </Button>
          </div>
        </Col>
      </Row>
    </div>
  )
}

export default Nav;

Content.js （内容区域）

import React from 'react';
import routes from '../routes/index'
import { Row, Col } from 'antd';
import { useRoutes } from 'react-router-dom'

function Content() {
  // 根据路由表生成的路由规则
  const element = useRoutes(routes)

  return(
    <div>
      <Row>
        <Col span={24}>
          {element}
        </Col>
      </Row>
    </div>
  )
}

export default Content;

//配置路由

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter> //包裹整个应用
      <App />
    </BrowserRouter>
);

在根目录下创建routes文件夹里面创建index.js

src/routes/index.js

import { Navigate } from 'react-router-dom'
import Home from '../page/home'
import About from '../page/about'

const paths = [
  {
    path: '/about',
    element: <About/>
  },
  {
    path: '/home',
    element: <Home/>
  },
  {
    path: '/',
    element: <Navigate to="/about" />
  }
]

export default paths;

//创建组件

home.js

import React, { Component } from 'react';

class home extends Component {
  render() {
    return (
      <div>
         home
      </div>
    );
  }
}

export default home;

about.js

import React, { Component } from 'react';

class about extends Component {
  render() {
    return (
      <div>
         about
      </div>
    );
  }
}

export default about;