您不应该使用 <Link>;在 &lt;Router&gt; 之外 [英] You should not use &lt;Link&gt; outside a &lt;Router&gt;

问题描述

我正在尝试在示例应用程序中设置 react-router，但出现以下错误:

你不应该使用<链接>在 <Router> 之外

我的应用设置如下:

父组件

const router = (<div className="sans-serif"><路由器 histpry={browserHistory}><Route path="/" component={Main}><IndexRoute 组件={PhotoGrid}></IndexRoute><Route path="/view/:postId" component={Single}></Route></路线></路由器>

);render(

, document.getElementById('root'));

子/主组件

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

)

知道我在这里做错了什么吗?

这是一个沙盒链接来演示问题.

解决方案

我假设您使用的是 React-Router V4，就像您在原始 沙盒链接.

您在对 ReactDOM.render 的调用中渲染了 Main 组件，该调用渲染了一个 Link 并且 Main 组件在 之外路由器，这就是它抛出错误的原因:

<块引用>

你不应该在 之外使用

变化:

1. 使用这些路由器中的任何一种、BrowserRouter/HashRouter 等...，因为您使用的是 React-Router V4.

2. Router 只能有一个子节点，因此将所有路由包装在 div 或 开关.

3. React-Router V4，没有嵌套路由的概念，如果你想使用嵌套路由，那么直接在该组件内部定义这些路由.

<小时>

检查此工作示例，了解每项更改.

父组件:

const App = () =>(<浏览器路由器><div className="sans-serif"><Route path="/" component={Main}/><Route path="/view/:postId" component={Single}/>

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

Main 路由组件

从'react'导入React；从'react-router-dom'导入{链接}；导出默认值 () =>(<div><h1><Link to="/">Redux 示例</Link>

)

等

<小时>

另请查看此答案:使用 react 路由器 v4 的嵌套路由

I'm trying to set up react-router in an example application, and I'm getting the following error:

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

My app is set up like so:

Parent component

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'));

Child/Main component

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

Any idea what I'm doing wrong here?

Here's a Sandbox link to demonstrate the problem.

解决方案

I'm assuming that you are using React-Router V4, as you used the same in the original Sandbox Link.

You are rendering the Main component in the call to ReactDOM.render that renders a Link and Main component is outside of Router, that's why it is throwing the error:

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

Changes:

1. Use any one of these Routers, BrowserRouter/HashRouter etc..., because you are using React-Router V4.

2. Router can have only one child, so wrap all the routes in a div or Switch.

3. React-Router V4, doesn't have the concept of nested routes, if you wants to use nested routes then define those routes directly inside that component.

---

Check this working example with each of these changes.

Parent Component:

const App = () => (
  <BrowserRouter>
    <div className="sans-serif">
      <Route path="/" component={Main} />
      <Route path="/view/:postId" component={Single} />
    </div>
  </BrowserRouter>
);

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

Main component from route

import React from 'react';
import { Link } from 'react-router-dom';

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

Etc.

---

Also check this answer: Nested routes with react router v4

这篇关于您不应该使用 <Link>;在 &lt;Router&gt; 之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！