我也遇到同样的问题。
https://reacttraining.com/react-router/web/guides/quick- start促销react- router-dom
react- router-dom
同样,人们发现list down routes在一个文件中而不是在组件中更好。
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}/>
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组件放在自己的文件中将是微不足道的。下面的示例已完成并将运行。
<Home>, <List>
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