嵌套路由与反应路由器v4
我目前正在使用反应路由器v4筑巢路线挣扎。
最接近的例子是React-Router v4文档中的路由configuration。
我想分两个不同的部分我的应用程序。
前端和pipe理区域。
我在想这样的事情：
<Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} /> 前端与pipe理区域有不同的布局和风格。 所以在首页的路线回家，约一等应该是孩子的路线。
/ home应该被渲染到Frontpage组件中， / admin / home应该被渲染到后端组件中。
我尝试了一些变化，但我总是没有打到/ home或/ admin / home。
编辑 – 19.04.2017
因为这个post现在有很多的意见，所以我用最终的解决scheme进行了更新。 我希望它可以帮助别人。
编辑 – 08.05.2017
删除旧的解决scheme
最终解决scheme
这是我现在使用的最终解决scheme。 这个例子也有一个像传统的404页面一样的全局错误组件。
import React, { Component } from 'react'; import { Switch, Route, Redirect, Link } from 'react-router-dom'; const Home = () => <div><h1>Home</h1></div>; const User = () => <div><h1>User</h1></div>; const Error = () => <div><h1>Error</h1></div> const Frontend = props => { console.log('Frontend'); return ( <div> <h2>Frontend</h2> <p><Link to="/">Root</Link></p> <p><Link to="/user">User</Link></p> <p><Link to="/admin">Backend</Link></p> <p><Link to="/the-route-is-swiggity-swoute">Swiggity swooty</Link></p> <Switch> <Route exact path='/' component={Home}/> <Route path='/user' component={User}/> <Redirect to={{ state: { error: true } }} /> </Switch> <footer>Bottom</footer> </div> ); } const Backend = props => { console.log('Backend'); return ( <div> <h2>Backend</h2> <p><Link to="/admin">Root</Link></p> <p><Link to="/admin/user">User</Link></p> <p><Link to="/">Frontend</Link></p> <p><Link to="/admin/the-route-is-swiggity-swoute">Swiggity swooty</Link></p> <Switch> <Route exact path='/admin' component={Home}/> <Route path='/admin/user' component={User}/> <Redirect to={{ state: { error: true } }} /> </Switch> <footer>Bottom</footer> </div> ); } class GlobalErrorSwitch extends Component { previousLocation = this.props.location componentWillUpdate(nextProps) { const { location } = this.props; if (nextProps.history.action !== 'POP' && (!location.state || !location.state.error)) { this.previousLocation = this.props.location }; } render() { const { location } = this.props; const isError = !!( location.state && location.state.error && this.previousLocation !== location // not initial render ) return ( <div> { isError ? <Route component={Error} /> : <Switch location={isError ? this.previousLocation : location}> <Route path="/admin" component={Backend} /> <Route path="/" component={Frontend} /> </Switch>} </div> ) } } class App extends Component { render() { return <Route component={GlobalErrorSwitch} /> } } export default App;
在react-router-v4中，不要嵌套<Routes /> 。 相反，你把它们放在另一个<Component /> 。
例如
<Route path='/topics' component={Topics}> <Route path='/topics/:topicId' component={Topic} /> </Route>
应该成为
<Route path='/topics' component={Topics} />
同
const Topics = ({ match }) => ( <div> <h2>Topics</h2> <Link to={`${match.url}/exampleTopicId`}> Example topic </Link> <Route path={`${match.url}/:topicId`} component={Topic}/> </div> )
以下是直接来自react-router 文档的基本示例 。
只是想提起react-router v4从根本上改变，因为这个问题被张贴/回答。
没有<Match>组件了！ <Switch>是确保只渲染第一个匹配。 好，redirect到另一个路由。 使用或不使用部分匹配。
看文档。 他们都是伟大的。 https://reacttraining.com/react-router/
这里有一个例子，我希望可以回答你的问题。
<Router> <div> <Redirect exact from='/' to='/front'/> <Route path="/" render={() => { return ( <div> <h2>Home menu</h2> <Link to="/front">front</Link> <Link to="/back">back</Link> </div> ); }} /> <Route path="/front" render={() => { return ( <div> <h2>front menu</h2> <Link to="/front/help">help</Link> <Link to="/front/about">about</Link> </div> ); }} /> <Route exact path="/front/help" render={() => { return <h2>front help</h2>; }} /> <Route exact path="/front/about" render={() => { return <h2>front about</h2>; }} /> <Route path="/back" render={() => { return ( <div> <h2>back menu</h2> <Link to="/back/help">help</Link> <Link to="/back/about">about</Link> </div> ); }} /> <Route exact path="/back/help" render={() => { return <h2>back help</h2>; }} /> <Route exact path="/back/about" render={() => { return <h2>back about</h2>; }} /> </div>
希望它帮助，让我知道。 如果这个例子不能很好地回答你的问题，告诉我，我会看看我是否可以修改它。
有些事情是这样的。
import React from 'react'; import { BrowserRouter as Router, Route, NavLink, Switch, Link } from 'react-router-dom'; import '../assets/styles/App.css'; const Home = () => <NormalNavLinks> <h1>HOME</h1> </NormalNavLinks>; const About = () => <NormalNavLinks> <h1>About</h1> </NormalNavLinks>; const Help = () => <NormalNavLinks> <h1>Help</h1> </NormalNavLinks>; const AdminHome = () => <AdminNavLinks> <h1>root</h1> </AdminNavLinks>; const AdminAbout = () => <AdminNavLinks> <h1>Admin about</h1> </AdminNavLinks>; const AdminHelp = () => <AdminNavLinks> <h1>Admin Help</h1> </AdminNavLinks>; const AdminNavLinks = (props) => ( <div> <h2>Admin Menu</h2> <NavLink exact to="/admin">Admin Home</NavLink> <NavLink to="/admin/help">Admin Help</NavLink> <NavLink to="/admin/about">Admin About</NavLink> <Link to="/">Home</Link> {props.children} </div> ); const NormalNavLinks = (props) => ( <div> <h2>Normal Menu</h2> <NavLink exact to="/">Home</NavLink> <NavLink to="/help">Help</NavLink> <NavLink to="/about">About</NavLink> <Link to="/admin">Admin</Link> {props.children} </div> ); const App = () => ( <Router> <div> <Switch> <Route exact path="/" component={Home}/> <Route path="/help" component={Help}/> <Route path="/about" component={About}/> <Route exact path="/admin" component={AdminHome}/> <Route path="/admin/help" component={AdminHelp}/> <Route path="/admin/about" component={AdminAbout}/> </Switch> </div> </Router> ); export default App;
