react学习之路1：react基础路由配置

最近接手了一个react项目的任务
之前一直没学过react的我临危受命，凭借着js的功底完成了这个任务，但是既然入坑了react，那我也来从头好好学习一下react这个框架吧（毕竟大厂都爱react）

这里我记录一下我学习react的路由配置

首先先放一下我的项目目录

应该大家都能看懂吧，接下来我们安装一下相关的依赖（react-router-dom）

npm install react-router-dom --save

接下来我们创建三个页面组件（app，page1，page2），参考上面的文件结构来创建噢
App/index.js

import './App.css';
import React, { Component } from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( <div>这是页面app</div> );
    }
}
 
export default App;

下一步我们在入口文件index.js中引入这三个组件

import App from './page/App/App';
import pageA from './page/pageA';
import pageB from './page/pageB';

接下来我们在index.js中引入（react-router-dom），并编写路由（有一定vue经验的应该也能很快看懂）

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter , Route} from 'react-router-dom';
import './index.css';
import App from './page/App/App';
import pageA from './page/pageA';
import pageB from './page/pageB';

ReactDOM.render(
  <BrowserRouter>
        <div>
            <Route exact path="/" component={App} />
            <Route  path="/pageA" component={pageA} />
            <Route  path="/pageB" component={pageB} />
        </div>
    </BrowserRouter>,
  document.getElementById('root')
);

这时页面路由已经配置完成，当你们在浏览器中切换地址，就可以查看效果，为了便利，我在这里再写一个nav组件控制路由跳转

nav/index.js

import React from 'react';
import { NavLink } from 'react-router-dom';

const NavBar = () => (
    <div>
        <div>
            <NavLink exact to='/'>App</NavLink> |&nbsp;
            <NavLink to='/pageA'>pageA</NavLink> |&nbsp;
            <NavLink to='/pageB'>pageB</NavLink>
        </div>
    </div>
)
export default NavBar;

这里引入了NavLink ，有兴趣深入了解的可以百度一下文档
接着我们修改一下入口文件，引入nav

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter , Route} from 'react-router-dom';
import './index.css';
import App from './page/App/App';
import pageA from './page/pageA';
import pageB from './page/pageB';
import Nav from './components/nav';

ReactDOM.render(
  <BrowserRouter>
        <div>
            <Nav />
            <Route exact path="/" component={App} />
            <Route  path="/pageA" component={pageA} />
            <Route  path="/pageB" component={pageB} />
        </div>
    </BrowserRouter>,
  document.getElementById('root')
);

接着我们就可以在浏览器中查看效果

基础用法大功告成！