react-router

Posted heidekeyi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-router相关的知识,希望对你有一定的参考价值。

 

 

1 SPA

 

1.1 Single Page Application

1.2 页面不刷新

2 创建项目(参考 react.org)

3 简单的例子

 

3.1 index.js 入口配置

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;
import App from ‘./App‘;
import * as serviceWorker from ‘./serviceWorker‘;

//为了和其他的路由名称使用一致,重命名路由名 称
import {BrowserRouter as Router} from ‘react-router-dom‘;

ReactDOM.render(
    <Router>
        <App/>
    </Router>,
    document.getElementById(‘root‘));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

3.2 App.js

必要的一些组件自行创建

import React from ‘react‘;

import {Link, Route} from ‘react-router-dom‘;

import C1 from ‘./components/C1‘;
import C2 from ‘./components/C2‘;
import C3 from ‘./components/C3‘;

// 路由规则是匹配前缀
// 添加 exact 要求精确匹配
function App() {
    return (
        <div>
            <Link to=‘/‘>p1</Link>
            <Link to={‘/p2‘}>p2</Link>
            <Link to={‘/p3‘}>p3</Link>

            <Route path=‘/‘ exact component={C1}/>
            <Route path={‘/p2‘} component={C2}/>
            <Route path={‘/p3‘} component={C3}/>
        </div>
    )
}

export default App;

Created: 2019-11-30 周六 17:39

Validate

以上是关于react-router的主要内容,如果未能解决你的问题,请参考以下文章

React-Router学习

使用 webpack 和 react-router 进行延迟加载和代码拆分不加载

如何使此代码与 react-router v6 兼容

react-router 学习笔记

react-router 4实现代码分割(code spliting)

React-Router如何防止重定向