Вы не должны использовать вне

Я пытаюсь настроить 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>
)

есть идеи, что я делаю неправильно здесь?

вот ссылка на песочницу чтобы продемонстрировать проблему.

12
jsx react-router reactjs

4 ответов

Я предполагаю, что вы используете React-Router V4, так как вы использовали то же самое в оригинале Ссылка На Песочницу.

вы оказываете Main компонент в вызове ReactDOM.render что делает Link и основной компонент находится за пределами Router, вот почему он бросает ошибку:

вы не должны использовать вне

изменения:

  1. используйте любой из эти маршрутизаторы, BrowserRouter / HashRouter etc..., потому что вы используете 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>
)

Etc.

также проверить этот ответ: вложенные маршруты с маршрутизатором react v4

10

Я вроде как придумал этот код : 

import React from 'react';
import { render } from 'react-dom';

// import componentns
import Main from './components/Main';
import PhotoGrid from './components/PhotoGrid';
import Single from './components/Single';

// import react router
import { Router, Route, IndexRoute, BrowserRouter, browserHistory} from 'react-router-dom'

class MainComponent extends React.Component {
  render() {
    return (
      <div>
        <BrowserRouter history={browserHistory}>
          <Route path="/" component={Main} >
            <IndexRoute component={PhotoGrid}></IndexRoute>
            <Route path="/view/:postId" component={Single}></Route>
          </Route>
        </BrowserRouter>
      </div>
    );
  }
}

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

Я думаю, что ошибка была в том, что вы рендеринг Main компонент, и Main компонент ничего не знает о Router, поэтому вы должны отобразить его компонент отца.

2

написать маршрутизатор на месте Main на render (последняя строка кода). Вроде этого Реактдом.рендер(маршрутизатор, документ.getElementById ('root'));

0

Если вы не хотите много менять, используйте ниже код внутри метода onClick ().

this.props.history.push('/');
-4