react-router

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();

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;