您不应该在

Question

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

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

我的html" target="_blank">应用程序设置如下：

父组件

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

知道我在做什么错吗？

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

Answer 1

我假设您使用的是React-Router V4，就像您在原始Sandbox
Link中
使用的一样。

您呈现Main在调用组件ReactDOM.render用来渲染Link和主要成分是外面Router，这就是为什么它被抛出的错误：

您不应在 外使用

变化 ：

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

2. 路由器只能有一个孩子，因此将所有路由包装在div或交换机中。

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

通过所有这些更改来检查 此工作示例 。

父组件：

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 路线中的组成部分

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

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

等等。