react初学(二)简单路由配置

搭建好脚手架，运行成功后，参考下图创建各文件夹

pages文件中创建如下图文件夹以及文件

文件内容参考Login.js

• react-router：提供了router的核心api。如Router、Route、Switch等，但没有提供有关dom操作进行路由跳转的api；

• react-router-dom：提供了BrowserRouter、Route、Link等api，可以通过dom操作触发事件控制路由

react-router-dom里包含了react-router的依赖，因此我们在安装的时候只需要安装后者即可

npm install react-router-dom --save

安装完成之后如果运行报错，就继续npm install

App.js中改为

import React from 'react';
import { BrowserRouter as Router, Route} from "react-router-dom";
import './App.css';
import Login from './pages/js/Login'
import List from './pages/js/admin/List'


function App() {
  return (
    

      
        
        
      
    
  );
}

export default App;

运行之后访问(此时默认还是根路由,自行输入地址栏中可得到下图)

 

嵌套路由

在需要嵌套的地方 props.children

我们在admin文件夹中创建EditSon文件夹作为Edit的子路由

在Edit中写入

在App.js中添加之后的文件

import React from 'react';
import { BrowserRouter as Router, Route} from "react-router-dom";
import './App.css';
import Login from './pages/js/Login'
import List from './pages/js/admin/List'
import Edit from './pages/js/admin/Edit'
import EditSon from './pages/js/admin/EditSon'



function App() {
  return (
    

      
        
        
        (
          
            
          
        )}>
        
      
    
  );
}

export default App;

运行得到