我正在尝试设置一些嵌套路由来添加公共布局.检查代码:

  <Router>
    <Route component={Layout}>
      <div>
        <Route path='/abc' component={ABC} />
        <Route path='/xyz' component={XYZ} />
      </div>
    </Route>
  </Router>

虽然这很好用,但我仍然收到警告:

警告:您不应在同一路线中使用<Route component>和<Route children>; 将被忽略

我正在尝试在示例应用程序中设置react-router,我收到以下错误:

You should not use <Link> outside a <Router>

我的应用程序设置如下:

父组件

const router = (
  <div className="sans-serif">
    <Router histpry={browserHistory}>
      <Route path="/" component={Main}>
        <IndexRoute component={PhotoGrid}></IndexRoute>
        <Route path="/view/:postId" component={Single}></Route>
      </Route>
    </Router>
  </div>
);

render(<Main />, document.getElementById('root'));

儿童/ Main组件

export default () => (
  <div>
    <h1>
      <Link to="/">Redux example</Link>
    </h1>
  </div>
)

知道我在这里做错了吗？

这是一个用于演示问题的Sandbox链接.

有没有办法在React Router v4中嵌套路由？

这有效:

  <Router basename='/app'>
    <main>
      <Route path='/' component={AppBar} />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

这不是:

  <Router basename='/app'>
    <Route path='/' component={AppBar}>
      <Route path='/customers' component={Customers} />
    </Route>
  </Router>

客户组件:

import React, { Component, PropTypes } from 'react'
import styled from 'styled-components'

export default class Customers extends Component {
  render () {
    return (
      <Container>
        <h1>Customers</h1>
      </Container>
    )
  }
}

const Container = styled.section`
  height: 100%;
  padding: 15px;
  overflow: auto;
`

世界上如何在react-router中使用嵌套路由,特别是版本4.x？以下版本在以下版本中运行良好...

<Route path='/stuff' component={Stuff}>
  <Route path='/stuff/a' component={StuffA} />
</Route>

升级到4.x会发出以下警告......

警告:您不应在同一路径中使用<Route>组件和<Route children>; <Route children>将被忽略

到底发生了什么事？我已经搜索了几个小时的文档,无法成功地使嵌套路由工作.如何使用<Route>组件在react-router v4中嵌套其路由？我的简单示例如何转换为嵌套路由的v4.x API合规性？

我正在尝试像标签面板一样使用 AntD 菜单侧边。

我想将组件放在内容中，以便在单击菜单项时内容面板呈现相关组件。

如何让这种结构将组件作为每个菜单项的内容？

import React from 'react';
import { compose } from 'recompose';
import { Divider, Layout, Card, Tabs, Typography, Menu, Breadcrumb, Icon } from 'antd';
import { PasswordForgetForm } from '../Auth/Password/Forgot';


const { Title } = Typography
const { TabPane } = Tabs;
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;


class Dashboard extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed …

尝试执行以下操作,但它无法正常工作.

ReactDOM.render(
  <Router>
    <div className="route-wrapper">
      <Switch>
        <App>
          <Route exact path="/" component={HomePage} />
          <Route path="/user" component={UserPage} />
        </App>
        <Route component={Err404} />
      </Switch>
    </div>
  </Router>,
  document.getElementById('main')
)

正如文档所述,在Switch元素中只允许使用Route和Redirect元素.如果没有在App中明确地包装HomePage和UserPage或者App包含错误页面,我如何才能使用它？

我在用

    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.2",

野兔我的溃败：

<BrowserRouter>
        <div>
            <Route exact path='/' component={Layout}></Route>
            <Route path='/about' name="about" component={About}>
                <Route path="/:article" component={anotherAbout}></Route>
            </Route>
            <Route path='/protfolio' name="protfolio" component={Portfolio}></Route>
        </div>
    </BrowserRouter >

当我打电话 {this.props.match.params.article}给 undefined

还有我的控制台： this.props

为什么staticContext: undefined和我的props.match.params空对象。

我正在构建一个反应应用程序，但我无法使路由工作。

1. 我需要一些验证途径一个共同的布局（页眉，页脚）（ ，/login，sign-up，forgot-password等...）

2. 我需要需要另一种常见的布局应用程序的保护部分的剩余部分（Home，Dashboard，等...）

3. 我需要另一个没有任何布局的 404 页面。

我从这些链接中尝试了几种技术：

• React Router v4 的多种布局
• https://simonsmith.io/reusing-layouts-in-react-router-4
• 带有反应路由器 v4 / v5 的嵌套路由
• https://reacttraining.com/react-router/web/example/route-config

但可以达到工作版本。

这是我目前拥有的：

（注意：现在我忽略了阻止非登录用户进入 AppLayout 的私有路由的需要，我会在之后处理这个问题）

const App: React.FC = () => {
    const history = createBrowserHistory();

    return (
        <div className="App">
            <Router history={history}>
                <Switch>
                    <AppLayout>
                        <Route path="/home" component={HomePage}/>
                        <Route path="/dashboard" component={DashboardPage}/>
                        ...
                    </AppLayout>
                    <AuthLayout>
                        <Route path="/login" component={LoginPage}/>
                        <Route path="/sign-up" component={SignUpPage}/>
                        ...
                    </AuthLayout>
                    <Route path="*" component={NotFoundPage} />
                </Switch>
            </Router>
        </div>
    );
};

export …

我试图通过使用react activeClassName属性来设置我的导航样式.到目前为止,它按预期工作,但有一个问题 - 我的第一个导航链接指向根路径(/).因此,即使在另一个URL上,它也会将该URL(例如/技能)和root注册为活动(因此2个菜单项的样式).

有一个简单的解决方法吗？我应该将Root路由定义为其他东西(例如/ home)吗？

我的标题:

import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';

const Header = () => {
    return (
        <div className="header">
            <div className="headerImage"></div>
            <ul className="headerNav">
                <li className="headerNavLink"><Link to="/" activeClassName="activeLink">introduction</Link></li>
                <li className="headerNavLink"><Link to="/skills" activeClassName="activeLink">skills</Link></li>
                <li className="headerNavLink"><Link to="/portfolio" activeClassName="activeLink">portfolio</Link></li>
            </ul>
        </div>
    );
};

export default Header;

routes.js:

import React from 'react';
import { Route, IndexRoute } from 'react-router';
//Import app
import App from './components/App';
//Import pages
import IntroductionPage from './components/introduction/IntroductionPage';
import …

我想添加一个没有App作为父级的登录页面.这是我目前的HashRouter设置:

  <Provider store={ store }>
    <HashRouter>
      <App>
        <Route path='/path1' component={ Component1 } />
        <Route path='/path2' component={ Component2 } />
        <Route path='/path3' component={ Component3 } />
      </App>
    </HashRouter>
  </Provider>

如果我这样做:

  <Provider store={ store }>
    <HashRouter>
      <div>
        <Route path='/login' component={ Login } />
        <App>
          <Route path='/path1' component={ Component1 } />
          <Route path='/path2' component={ Component2 } />
          <Route path='/path3' component={ Component3 } />
        </App>
      </div>
    </HashRouter>
  </Provider>

然后我在应用程序上方获得登录页面.这是我的应用程序组件:

const App = ({ children }) => (
  <div>
    <Navbar/>
    <div className='col-md-10 col-md-offset-1'>
      { children …

我目前正在尝试将react-react从v3迁移到v4,但是我无法完全掌握新概念,我的旧反应路由器v3代码看起来像这样,有人可以看看并给我一些提示吗？

谢谢!

<Router history={ browserHistory }>
     <Route path="/" component={ App }>
       <IndexRoute name="index" component={ Index } />
       <Route name="documents" path="/documents" component={ Documents } onEnter={ authenticate } />
       <Route name="newDocument" path="/documents/new" component={ NewDocument } onEnter={ authenticate } />
       <Route name="editDocument" path="/documents/:_id/edit" component={ EditDocument } onEnter={ authenticate } />
       <Route name="viewDocument" path="/documents/:_id" component={ ViewDocument } onEnter={ authenticate } />
       <Route name="login" path="/login" component={ Login } />
       <Route name="recover-password" path="/recover-password" component={ RecoverPassword } />
       <Route name="reset-password" path="/reset-password/:token" component={ ResetPassword } />
       <Route name="signup" …

我正在尝试在 Reactjs 中实现子/嵌套路由，下面是我发现的用于嵌套子路由的 2 种方法，但父路由工作正常，而父组件的子路由则不然。

以下是其工作原理的路线：

/ => Home Component
/login => Login Component
/register => Register Componet

/product/ => ProductListing Component 
/product/2 => ProductDetails Component [Expected but does not work]
/product/2/edit => ProductEdit Component [Expected but does not work]

方法一

以下是我的主要路线文件：

export default function MainRouter() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/register" component={Register} />
      <Route exact path="/product" component={ProductRouter} />
    </Router>
  );
}

和 Product 的子路由，如下所示在 ProductRouter.js 文件中

export default …