预览

image

准备

  1. 使用脚手架create-react-app创建react应用
npm install create-react-app -g
create-react-app react-router-demo
cd react-router-demo
  1. 下载react-router-dom
npm install --save react-router-dom
  1. 在src目录下新建文件夹components

项目结构

image

头部组件

import React, { Component } from 'react';
import {Link} from 'react-router-dom';

class Header extends Component{
    render() {
        return (
            <div className="header">
                <Link to="/" className="logo">Roothub</Link>
                <div className="right">
                    <Link to="/">首页</Link>&nbsp;•&nbsp;
                    <Link to="/login">登录</Link>&nbsp;•&nbsp;
                    <Link to="/register">注册</Link>
                </div>
            </div>
        );
    }
}

export default Header;

底部组件

import React, { Component } from 'react';

class Footer extends Component{
    render() {
        return (
            <div className="footer">
                <p>底部信息</p>
            </div>
        );
    }
}

export default Footer;

首页组件

import React, { Component } from 'react';

class Home extends Component{
    render() {
        return (
            <div className="home">
                <h2>这是首页</h2>
            </div>
        );
    }
}

export default Home;

登录组件

import React, { Component } from 'react';

class Login extends Component{
    render() {
        return (
            <div className="login">
                <h2>这是登录页</h2>
            </div>
        );
    }
}

export default Login;

注册组件

import React, { Component } from 'react';

class Register extends Component{
    render() {
        return (
            <div className="register">
                <h2>这是注册页</h2>
            </div>
        );
    }
}

export default Register;

index文件

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter,Switch,Route} from 'react-router-dom';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './components/Home';
import Login from './components/Login';
import Register from './components/Register';;

ReactDOM.render(
    (<BrowserRouter>
        <Switch>
            <div className="container">
                <Header/>
                <Route exact path="/" component={Home}/>
                <Route path="/login" component={Login}/>
                <Route path="/register" component={Register}/>
                <Footer/>
            </div>
        </Switch>
    </BrowserRouter>), document.getElementById('root')
);

到这一步就可以看到效果了,但是我们还可以优化一下代码。

优化

在components目录下新建一个DefaultLayout文件,用来定义整个应用的布局和路由

代码如下

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

import Header from './Header';
import Footer from './Footer';

const DefaultLayout = ({component : Component, ...rest}) => {
    return (
        <Route {...rest} render={matchProps => (
            <div className="container">
                <Header/>
                <Component {...matchProps}/>
                <Footer/>
            </div>
        )} />
    )
};
export default DefaultLayout;

然后修改index文件的代码

<Switch>
    {/*<div className="container">
        <Header/>
        <Route exact path="/" component={Home}/>
        <Route path="/login" component={Login}/>
        <Route path="/register" component={Register}/>
        <Footer/>
    </div>*/}
    <DefaultLayout exact path="/" component={Home}/>
    <DefaultLayout path="/login" component={Login}/>
    <DefaultLayout path="/register"component={Register}/>
</Switch>

原文链接:https://miansen.wang/2018/09/26/1/