我在想这样的事情:
<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} />
前台有一个不同的布局和风格与管理区域。所以在frontpage中的路由是home、about等等,其中一个应该是子路由。
/home应该呈现到Frontpage组件中,而/admin/home应该呈现在后端组件中。
最终解决方案:
这是我现在使用的最终解决方案。这个例子也像传统的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中,不嵌套
。相反,您将它们放在另一个
中。
例如
<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.path}/:topicId`} component={Topic}/>
</div>
)
问题内容: 我目前正在使用React Router v4来嵌套路由。 最接近的示例是React-Router v4文档中的route配置 。 我想将我的应用分为2个不同的部分。 前端和管理区域。 我在想这样的事情: 前端的布局和样式与管理区域不同。因此,在首页中,回家的路线大约应该是子路线。 / home 应该呈现在Frontpage组件中, / admin / home 应该呈现在Backend
问题内容: 我已经在应用程序中将React Router升级到了版本4。但是现在我得到了错误 此路由有什么问题? 问题答案: IndexRoute和browserHistory在最新版本中不可用,并且Routes不接受带有v4的子级Routes,您可以在组件本身中指定Routes 然后在主要部分 同样在汽车组件中 您将拥有
如果我将路由折叠起来,这样看起来就像: 工作很好。我嵌套的原因是因为我将在“dashboard”下有多个子项,并且希望它们都在URL中以为前缀。
问题内容: 我有以下路由配置: GuaranteeLoggedInContainer为: 但是,历史的推动力:没有用。这里没有历史。 如果我使用这样的配置: 我遇到类似的问题: reactjs中最好的身份验证方法是什么? 问题答案: 从我对您的React Router设计的了解中,您似乎正在使用React Router版本4 在这种情况下,您可以在组件本身中指定路由,并利用withRouter进行
我想在单个路由文件中实现嵌套路由和侧边栏路由的组合。我希望组件像这样渲染。 我的路线设置如下 在仪表板页面内,我基本上实现了react-router-dom网站的侧边栏示例。 它工作正常,但是我想把所有的路由放在一个文件中。 像这样的 上面的代码是虚构的代码,但它是为了给我一个想法,我试图实现。我试图从一个类似的问题解决,但它不适合我。 如何将所有路由放在一个文件中,并在react router
问题内容: 有没有办法在React Router v4中嵌套路由? 这有效: 这不是: 客户组成部分: 问题答案: 到目前为止,我发现的最佳模式。 我可以继续将其嵌套在组件中,并且一切都很好,包括hmr(如果使用webpack,请不要忘记设置为)