index.js

import React, { PureComponent } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home1 from "./Home/Home1";
import Home2 from "./Home/Home2";

export default class IndexPage extends PureComponent {
render() {
return (
<div>
<Router>
<div>
<ul>
<li>
<Link to="/home1">Home1</Link>
</li>
<li>
<Link to="/home2">Home2</Link>
</li>
</ul>
<hr />
<Route exact path="/home1" component={Home1} />
<Route path="/home2" component={Home2} />
</div>
</Router>
</div>
);
}
}

route.js

import React from "react";
import { Router, Route, Switch } from "dva/router";
import Index from "./routes";

function RouterConfig({ history }) {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={Index} />
</Switch>
</Router>
);
}

export default RouterConfig;

效果图

React 一侧固定导航栏、另一侧内容_vue.js

项目结构

React 一侧固定导航栏、另一侧内容_项目结构_02