react配置路由跳转页面

在React中使用react-router-dom路由

第一步：首先下载插件

        npm install react-router-dom -D

使用react-router-config库来进行路由配置。

  下载插件  npm install react-router-config -D

页面这个时候package.json文件就会有这两个配置了

 页面使用，首先在src下的index修改代码

在上面引入react-router-dom

import {HashRouter as Router} from 'react-router-dom';

原本是React.StrictMode,修改为Router

 第二步：在scr文件下新建routes文件，routes下新建index.js文件，写入路由组件

import Index from '../components/index';
import List from '../components/list';

const routes = [
    {
        path: '/',  //地址
        exact: true,  //精准匹配
        component: Index  //引入的组件名
    },
    {
        path: '/list',
        component: List
    }
];

export default routes;

第三步：在scr文件下新建components文件里面写组件就可以了，其实react和组件和vue的组件是一样的，vue的组件是.vue文件，而react组件是.js文件

index.js文件

import React, { Component } from 'react';
//export default 是直接把他暴露出去
export default class Index extends Component {
    //constructor(...args) {
      //  super(...args);
    //}
  
    render() {
        return (
            <div>
               index页面
            </div>
        )
    }
}

list.js组件

import React, { Component } from 'react';
//export default 是直接把他暴露出去
export default class List extends Component {
    //constructor(...args) {
      //  super(...args);
    //}
  
    render() {
        return (
            <div>
               List页面
            </div>
        )
    }


}

 第四步：主页面App.js文件下引入react-router-dom和react-router-config

import { Link } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import routes from './routes/index';  //引入子组件文件夹


class App extends Component {
  constructor(...args) {
    super(...args)
  }
  render() {
    return (<div>
      <div>
        <Link to='/'>首页</Link>
        <Link to='/list'>列表</Link>
      </div>
      <div>
        {renderRoutes(routes)}
      </div>
    </div>)
  }
}

export default App;

 这样就完成了路由跳转