页面路由

页面路由

为了使用路由，先下好react-router-dom

cnpm install react-router-dom --save

该blog项目总共有四个页面

• Home：页面主页
• Display：阅读文章的页面
• Edit：编辑文章的页面
• Login：登录页面

为了演示路由，在pages中分别新建Home, Display, Edit, Login四个文件夹，并在每个文件夹中新建index.jsx，同时在Edit文件夹了新建components文件夹，将RichText文件夹全部移入到这个文件夹中(因为RichText富文本编辑器属于编辑文章页面的一部分)，简单的在每个文件的index.jsx写下一些内容，具体的内容在后面添加。

// Home/index.jsx
import React from 'react'
import BasicLayout from './../../layouts/BasicLayout'
import {withRouter} from 'react-router-dom'
function Home(props) {
    return (
        <BasicLayout>
            Home
        </BasicLayout>
    )
}
export default withRouter(Home)

// Display/index.jsx
import React from 'react'
import BasicLayout from './../../layouts/BasicLayout'
import {withRouter} from 'react-router-dom'
function Display(props) {
    return (
        <BasicLayout>
            Display
        </BasicLayout>
    )
}
export default withRouter(Display)

// Edit/index.jsx
import React from 'react'
import BasicLayout from './../../layouts/BasicLayout'
import {withRouter} from 'react-router-dom'
import RichText from './components/RichText'
function Edit() {
    return (
        <BasicLayout>
            <RichText />
        </BasicLayout>
    )
}
export default withRouter(Edit)

// Login/index.jsx
import React from 'react'
import {withRouter} from 'react-router-dom'
import LoginLayout from './../../layouts/LoginLayout'
function Login(props) {
    return (
        <LoginLayout>
            login
        </LoginLayout>
    )
}
export default withRouter(Login)

设计页面路由如下

注意到Edit组件对应两个路径，因为编辑文章有两种情况，第一种是添加文章，这时是/edit路径，第二种是编辑文章，这时需要传入文章的id，所以这时是/edit/:id路径。

在src下新建文件夹config，在config新建routes.js，里面设置路由信息，如下

import Home from './../pages/Home/index'
import Display from './../pages/Display/index'
import Edit from './../pages/Edit/index'
import Login from './../pages/Login/index'
export default [
    {
        path: "/login",
        component: Login
    },
    {
        path: "/home",
        component: Home
    },
    {
        path: "/display/:id",
        component: Display
    },
    {
        path: "/edit",
        component: Edit
    },
    {
        path: "/edit/:id",
        component: Edit
    },
    {
        path: "/",
        redirect: "/home",
        exact: true
    },
]

在src下新建router.js，用来渲染路由，内容如下

import React from 'react'
import routes from './config/routes'
import {Switch, BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
// 返回可能是Redirect 也可能是Route 所以使用RouteItem封装
const RouteItem = (props) => {
    const { path, component: Component, redirect, key, exact } = props;
    if (redirect) {
        return <Redirect from={path} to={redirect} key={key} />
    }
    return (
        <Route
            key={key}
            exact={exact}
            path={path}
            render={componentProps => {
                return (
                    <Component {...componentProps} />
                )
            }}
        />
    );
};
const router = () => {
    return (
        <Router>
            {/* Switch 唯一匹配  */}
            <Switch>
                {routes.map((item, id) => {
                    return RouteItem({ key: id, ...item })
                })}
            </Switch>
        </Router>
    );
};
export default router;

接着在src/index.js中渲染出来

import ReactDOM from 'react-dom';
import router from './router'
import './common.css';
ReactDOM.render(router(), document.getElementById("root"));

接着启动项目(npm start或yarn start)，改变浏览的url(如localhost:3000/display)看看页面是否能成功跳转(我这里是没有问题的，如果你不能的话，回过头仔细看看吧)。