关于未解决的问题(作为最终结论)
我也遇到同样的问题。
https://reacttraining.com/react-router/web/guides/quick-start促销react-router-dom
同样,人们发现list down routes
在一个文件中而不是在组件中更好。
提到的东西: https : //github.com/ReactTraining/react-router/tree/master/packages/react-router-config
起作用的东西(大部分):
import * as React from 'react'
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom'
export const Routes = () => (
<Router>
<div>
<Switch>
<Route exact path="/login" component={Login}/>
<MainApp path="/">
<Route path="/list" component={List}/>
<Route path="/settings" component={Settings}/>
</MainApp>
<Route path="*" component={PageNotFound}/>
</Switch>
</div>
</Router>
)
无法正常工作: site.com/SomeGarbagePath
显示<MainApp>
我的想法。
<Route path="*" component={PageNotFound}/>
更新资料
/ - Home - parent of all (almost)
/List - inside home
/Settings - inside home
/Login - standalone
/Users - inside home, For now just showing itself. It has further pages.
/User/123 - inside user with /:id
/User/staticUser - inside user with static route
/garbage - not a route defined (not working as expected)
这是一种完成您描述的方式(请注意,还有其他直接在React Components中处理布局的方式)。为了使示例简单,将其他组件(<Home>, <List>
等)创建为没有功能或状态的纯功能组件,但是将每个组件作为适当的React组件放在自己的文件中将是微不足道的。以下示例已完成并且将运行。
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
const Header = () => <h1>My header</h1>;
const Footer = () => <h2>My footer</h2>;
const Login = () => <p>Login Component</p>;
const Home = () => <p>Home Page</p>;
const List = () => <p>List Page</p>;
const Settings = () => <p>Settings Page</p>;
const PageNotFound = () => <h1>Uh oh, not found!</h1>;
const RouteWithLayout = ({ component, ...rest }) => {
return (
<div>
<Header />
<Route {...rest} render={ () => React.createElement(component) } />
<Footer />
</div>
);
};
return (
<Router>
<div>
<Switch>
<Route exact path="/login" component={Login} />
<RouteWithLayout exact path="/" component={Home} />
<RouteWithLayout path="/list" component={List} />
<RouteWithLayout path="/settings" component={Settings} />
<Route path="*" component={PageNotFound} />
</Switch>
</div>
</Router>
);
}
}
export default App;
这将执行以下操作,希望这是您的问题中现在描述的内容:
/login
没有页眉或页脚。/
,/list
和/settings
都有页眉和页脚。PageNotFound
组件,而没有页眉或页脚。本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句