React路由配置使用

àì夳堔傛蜴生んèń 2022-01-07 17:39 223阅读 0赞

#### Router包安装: ####

安装包还是要打开命令行工具，使用npm来进行安装。

npm install --save react-router react-router-dom
    
    页面login:

import React from 'react'
    import { createHashHistory } from 'history'
    
    // eslint-disable-next-line react/require-render-return
    export default class pagea extends React.Component{
        jumpHome(){
            createHashHistory().push('home')
        }
        jumpRegis(){
            createHashHistory().push('register')
    
        }
        render(){
            return(
                <div>
                    <div><br/><br/><br/><br/>login</div>
                    <button onClick={this.jumpHome}>login</button>
                    <button onClick={this.jumpRegis}>register</button>
                </div>
            )
        }
    }

页面a:

import React from 'react'
    
    export default class pagea extends React.Component{
        render(){
            return(
                <div>
                    <div><br/><br/><br/><br/>页面A</div>
                </div>
            )
        }
    }

页面B:

import React from 'react'
    
    export default class pageb extends React.Component{
        render(){
            return(
                <div>
                  <div>页面B</div>
                </div>
            )
        }
    }

home.js:

import React from 'react';
    import {NavLink} from 'react-router-dom';
    
    const NavBar = () =>(
        <div>
            <div>
                <NavLink exact to='/home/pagea'>pagea</NavLink><br/>
                <NavLink to='/home/pageb'>pageb</NavLink>
            </div>
        </div>
        )
        export default NavBar;

index.js:

import React from 'react';
    import ReactDOM from 'react-dom';
    import * as serviceWorker from './serviceWorker';
    import {BrowserRouter as Router ,HashRouter,MemoryRouter, Route , Switch ,Redirect} from 'react-router-dom';
    
    import Login from './components/login'
    import Register from './components/register'
    import Home from './home';
    import Pagea from './components/pagea'
    import Pageb from './components/pageb'
    
    
    ReactDOM.render(
        <HashRouter basename="" >
          <div>
            <Route exact path="/" component={Login} />
            <Route  path="/login" component={Login} />
            <Route  path="/register" component={Register} />
            <Route  path="/home" component={Home}>
              <Route  path="/home" component={Home}/>
              <Route  path="/home/pagea" component={Pagea} />
              <Route  path="/home/pageb" component={Pageb} />  
            </Route>
          </div>
          </HashRouter>,
        document.getElementById('root')
        )
    
    serviceWorker.unregister();

项目结构：

![1322162-20190316161906793-1586301640.png][]

转载于:https://www.cnblogs.com/lan-cheng/p/10541694.html

[1322162-20190316161906793-1586301640.png]: /images/20211220/e2fdd689632242069a4c2880f01a1162.png