使用React Router V4 / V5的嵌套路由


261

我目前正在使用React Router v4来嵌套路由。

最接近的示例是React-Router v4文档中的route配置 。

我想将我的应用分为两部分。

前端和管理区域。

我在想这样的事情:

<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} />

前端的布局和样式与管理区域不同。因此,在首页中,回家的路线大约应该是子路线。

/ home应该呈现在Frontpage组件中,/ admin / home应该呈现在Backend组件中。

我尝试了一些变体,但始终以不打/ home或/ admin / home结尾。

编辑-19.04.2017

因为这篇文章现在有很多观点,所以我用最终解决方案对其进行了更新。希望对您有所帮助。

编辑-08.05.2017

删除了旧的解决方案

最终解决方案:

这是我现在使用的最终解决方案。此示例还具有全局错误组件,例如传统的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;

1
感谢您用最终答案更新您的问题!只是一个建议:也许您只能保留第4个列表,第一个保留,因为其他列表使用的是过时的api版本,并且分散了答案的注意力
Giuliano Vilela

大声笑,我不知道这个日期是什么格式:08.05.2017如果您不想使人们感到困惑,建议您使用通用的ISO8601格式作为日期。是月还是日08?ISO8601 =年,月,日,时,分,秒(
逐年递减

尼斯更新的最终解决方案,但我认为您不需要previousLocation逻辑。
tudorpavel

完全重写React Router的动机是什么?最好是一个很好的理由
Oliver Watkins,

这是声明式的方法。因此,您可以像使用react组件一样设置路由。
datoml

Answers:


318

在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.path}/:topicId`} component={Topic}/>
  </div>
) 

这是直接来自react-router 文档基本示例


我可以在基本示例中从您的链接实现,但是当我手动键入url时,它在我的本地主机服务器上不起作用。但这确实在您的示例中。另一方面,当我用#手动键入url时,HashRouter可以正常工作。您是否知道为什么当我手动键入url时,为什么在我的本地主机服务器上的BrowserRouter不起作用?
himawan_r 17-4-18

8
可以将Topics组件变成一个类吗?匹配参数从何而来?在render()中?
user1076813 17-4-25

21
似乎荒谬的是,您不能仅仅to="exampleTopicId"因为${match.url}被隐含了。
greenimpala'5

8
您可以在每个docs reacttraining.com/react-router/web/example/route-config中具有嵌套路由。这将允许按照文档中的主题进行集中式路由配置。想想如果没有一个更大的项目,这将是多么疯狂。
JustDave

5
这些不是嵌套的路由,它仍然是使用功能组件作为输入的Route的render属性的单层路由,更仔细地看,在react router <4的意义上没有嵌套。RouteWithSubRoutes是一个级别的使用模式匹配的路由列表。
Lyubomir

102

react-router v6

2020年更新:即将发布的v6版本将包含RouteJust Work™的嵌套组件。请参阅此博客文章中的示例代码

尽管最初的问题是关于v4 / v5的,但在可能的情况下,仅在使用v6时才给出正确的答案。目前处于Alpha状态。


react-router v4 & v5

的确,要嵌套路由,您需要将它们放置在Route的子组件中。

但是,如果您更喜欢使用内联语法而不是通过组件来分解renderRoute,则可以为要嵌套的Route 的支持提供功能组件。

<BrowserRouter>

  <Route path="/" component={Frontpage} exact />
  <Route path="/home" component={HomePage} />
  <Route path="/about" component={AboutPage} />

  <Route
    path="/admin"
    render={({ match: { url } }) => (
      <>
        <Route path={`${url}/`} component={Backend} exact />
        <Route path={`${url}/home`} component={Dashboard} />
        <Route path={`${url}/users`} component={UserPage} />
      </>
    )}
  />

</BrowserRouter>

如果您对为什么render应该使用道具而不是component道具感兴趣,那是因为它阻止了内联功能组件在每个渲染器上重新安装。有关更多详细信息,请参见文档

请注意,该示例将嵌套的Routes包装在Fragment中。在React 16之前,您可以改用容器<div>


16
谢天谢地,唯一的解决方案是明确,可维护的,并且可以按预期工作。我希望路由器3的嵌套路由返回。
Merunas格林克兰氏炎

这一个完美的样子角航线出口
帕沙·兰詹

4
您应该使用match.path,而不是match.url。前者通常在Route path道具中使用;后者,当您推送新路线(例如链接to道具)时
nbkhope

50

只是想提一下,自发布/回答此问题以来,react-router v4发生了根本变化

没有任何<Match>组件了!<Switch>是为了确保仅呈现第一个匹配项。<Redirect>好..重定向到另一条路线。使用或忽略exact或排除部分匹配。

参见文档。他们都是伟大的。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>
</Router>

希望能有所帮助,让我知道。如果此示例不能很好地回答您的问题,请告诉我,我将看看是否可以对其进行修改。


exactRedirect reacttraining.com/react-router/web/api/Redirect上没有任何内容,这比<Route exact path="/" render={() => <Redirect to="/path" />} />我所做的要干净得多。至少它不会让我使用TypeScript。
Filuren

2
我是否正确理解没有嵌套/子路由这样的东西?我是否需要在所有路线中复制基本路线?React-Router 4不会以可维护的方式为构造路线提供任何帮助吗?
Ville

5
@Ville我很惊讶;您找到更好的解决方案了吗?我不想到处都是路线,天哪
朋克位

1
这将起作用,但请确保在bundle.js的webpack配置中将公共路径设置为“ /”,否则嵌套路由将无法在页面刷新上起作用。
vikrant

6

像这样的东西。

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;


6

通过Switch在根路由之前进行包装并定义嵌套路由,我成功地定义了嵌套路由。

<BrowserRouter>
  <Switch>
    <Route path="/staffs/:id/edit" component={StaffEdit} />
    <Route path="/staffs/:id" component={StaffShow} />
    <Route path="/staffs" component={StaffIndex} />
  </Switch>
</BrowserRouter>

参考:https : //github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md


重新排列顺序解决了我的问题,尽管我不知道这是否会有副作用。但现在正在工作..谢谢:)
Anbu369 '19

2

您可以尝试使用Routes.js之类的方法

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import FrontPage from './FrontPage';
import Dashboard from './Dashboard';
import AboutPage from './AboutPage';
import Backend from './Backend';
import Homepage from './Homepage';
import UserPage from './UserPage';
class Routes extends Component {
    render() {
        return (
            <div>
                <Route exact path="/" component={FrontPage} />
                <Route exact path="/home" component={Homepage} />
                <Route exact path="/about" component={AboutPage} />
                <Route exact path="/admin" component={Backend} />
                <Route exact path="/admin/home" component={Dashboard} />
                <Route exact path="/users" component={UserPage} />    
            </div>
        )
    }
}

export default Routes

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Routes from './Routes';

class App extends Component {
  render() {
    return (
      <div className="App">
      <Router>
        <Routes/>
      </Router>
      </div>
    );
  }
}

export default App;

我认为您也可以从这里实现相同的目标。


好点子!在Java Spring引导应用程序开发后从React开始时,我以同样的方式思考。我唯一要更改的是Routes.js中的“ div”到“ Switch”。而且,您可以在App.js中定义所有路由,但将其包装在index.js文件中,例如(create-react-app)
Reborn

是的,你是对的!我已经实现了这种方式,这就是为什么我提到这种方法的原因。
Aniruddh Agarwal,

-6
interface IDefaultLayoutProps {
    children: React.ReactNode
}

const DefaultLayout: React.SFC<IDefaultLayoutProps> = ({children}) => {
    return (
        <div className="DefaultLayout">
            {children}
        </div>
    );
}


const LayoutRoute: React.SFC<IDefaultLayoutRouteProps & RouteProps> = ({component: Component, layout: Layout, ...rest}) => {
const handleRender = (matchProps: RouteComponentProps<{}, StaticContext>) => (
        <Layout>
            <Component {...matchProps} />
        </Layout>
    );

    return (
        <Route {...rest} render={handleRender}/>
    );
}

const ScreenRouter = () => (
    <BrowserRouter>
        <div>
            <Link to="/">Home</Link>
            <Link to="/counter">Counter</Link>
            <Switch>
                <LayoutRoute path="/" exact={true} layout={DefaultLayout} component={HomeScreen} />
                <LayoutRoute path="/counter" layout={DashboardLayout} component={CounterScreen} />
            </Switch>
        </div>
    </BrowserRouter>
);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.