我正在开发单页ReactJS Web应用程序，但是我知道在用A:K定义路由时做错了。
我的问题如下：React Router V4文件中的PrivateRoute无法正常工作。也就是说，我不知道为什么，但是作为主routes.js子组件的侧边栏菜单无法正常工作：单击{{1 }}组件（在这种情况下为App）。当我说错误时，是指当我单击PrivateRoute的菜单项时，侧边栏菜单配置错误。呈现了组件（Page1）的内容，但侧栏菜单中的菜单项并未保持应有的突出显示状态：它被重定向到列表中的第一个菜单项，在这种情况下为{{1} }。
尽管如此，如果我在PrivateRoute文件中将Page1组件的标签从MainHome更改为Page1，一切正常。
我的文件PrivateRoute（主），ConfigRoute，routes.js和index.js中的示例：
routes.js（主）文件：
App.js side-menu.js文件：
index.js import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import Routes from './routes';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<Routes/>
</Provider>,
document.getElementById('root')
);
文件
routes.js import React, { Fragment } from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import Login from './login';
import App from './App';
import MainHome from './home';
import Page1 from './page1';
const ConfigRoute = ({ component: Component, layout: Layout, ...rest }) => (
<Route {...rest} render={(props) => (
<Layout>
<Component {...props}/>
</Layout>
)}/>
);
const PrivateRoute = ({ component: Component, layout: Layout, auth_status, ...rest }) => (
<Route {...rest} render={(props) => (
<Fragment>
{auth_status === true
? (
<Layout>
<Component {...props}/>
</Layout>
)
: (
<Redirect to={{ pathname: "/", state: { from: props.location } }}/>
)
}
</Fragment>
)}/>
);
const Routes = (props) => (
<Router>
<Switch>
<Route exact path="/" component={Login}/>
<ConfigRoute path="/home" layout={App} component={MainHome}/>
<PrivateRoute path="/page1" auth_status={props.auth_status} layout={App} component={Page1}/>
</Switch>
</Router>
);
const mapStatetoProps = state => ({
auth_status: state.auth.isAuthenticated,
});
export default connect(mapStatetoProps)(Routes);
文件：
App.js