路由我们可以理解成是用户在浏览器请求的一个路径响应,到产品成熟期,我们还有考虑到伪静态的问题。
首先我么看router dom的一个示例:
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div>
<a>查看 detail</a>
</div>
)
}
}
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div>
<a>返回home</a>
</div>
)
}
}
import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from '../home';
import Detail from '../detail';
const BasicRoute = () => (
<HashRouter>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/detail" component={Detail}/>
</Switch>
</HashRouter>
);
export default BasicRoute;
在入口文件引入一下:
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';
ReactDOM.render(
<Router/>,
document.getElementById('root')
);