React项目使用React-Router

相忘發表於 2019-12-11 14:00:00

⒈初始化React项目（略）
　　请参考　　初始化一个React项目（TypeScript环境）
⒉集成React-Router
　　在React世界里，公认最好用的路由是React-Router。那我们直接来集成它吧。
<div class="cnblogs_code">
<pre>yarn add react-router history
#如果是type环境
yarn add react-router @types/react-router history @types/history</pre>
</div>
⒊配置React-Router
　　在src中新建一个文件叫Router.js(如果是type环境则名称为Router.tsx)：
<div class="cnblogs_code">
<pre>cd src cd.>Router.js
#如果是type环境
cd.>Router.tsx</pre>
</div>
　　代码如下：
<div class="cnblogs_code">
<pre>import {createBrowserHistory} from 'history';
import React from 'react';
import {Route,Router} from 'react-router';
import App from './App';
import Edit from './Edit';

const history = createBrowserHistory()

export default () => (
<Router history={history}>
<>
 <Route exact path="/" component={App}/>
</>
</Router>
)</pre>
</div>
　　然后修改index.js（type环境为index.tsx）文件，将读取的组件修改为Router：
<div class="cnblogs_code">
<pre>import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import * as serviceWorker from './serviceWorker';
import Router from './Router';

// ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<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();</pre>
</div>
　　刷新一下页面，运行正常
　　那我们再添加一个页面Edit.js(type环境为Edit.tsx)，并为它配好路由：
<h5>Edit.js</h5>
<div class="cnblogs_code">
<pre>import React from 'react';

export default () => (
<div>Edit</div>
)</pre>
</div>
<h5>Router.js</h5>
<div class="cnblogs_code">
<pre>import {createBrowserHistory} from 'history';
import React from 'react';
import {Route,Router} from 'react-router';
import App from './App';
import Edit from './Edit';

const history = createBrowserHistory()

export default () => (
<Router history={history}>
<>
 <Route exact path="/" component={App}/>
 <Route path="/edit" component={Edit}/>
</>
</Router>
)</pre>
</div> 
来源：https://www.cnblogs.com/fanqisoft/p/12022163.html

頁: [1]

琼殿技术论坛's Archiver

React项目使用React-Router