react-router-dom與React-router是 5.x 版

1.安裝react-router-dom

npm install react-router-dom --save-dev //這裡可以使用cnpm代替npm命令

2.先編寫對應頁面，如App、page，然後再新建一個路由元件，命名為“router.js”，並編寫如下程式碼：

import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import App from './App'; 
import page from 
 
'./page/page'


const BasicRoute  = () => (
    <HashRouter>
        <Switch>
            <Route exact path="/" component={App}/>
            <Route exact path="/next" component={page}/>
        </Switch>
    </HashRouter>
);


export default BasicRoute;

3.在根目錄的“index.js”中引入路由元件 BasicRoute

import React from 'react';
import ReactDOM from 'react-dom';
import  BasicRoute  from './router';
import './index.css';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
     <BasicRoute/>,
  </React.StrictMode>,
  document.getElementById('root')
);

 
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4.此時執行專案，首頁是App.js，使用<a href='#/next'>實現跳轉,可以跳轉到page.js。

<a href='#/next'><Button type="primary">go to next</Button></a>

本文來自部落格園，作者：不如飼豬，轉載請註明原文連結：https://www.cnblogs.com/ifeelthecall/p/15344024.html