Не следует использовать <Link>вне <Router>Ошибка - PullRequest
Новая
       8

Не следует использовать <Link>вне <Router>Ошибка

0 голосов
/ 21 ноября 2018

Я пытаюсь перемещаться по различным экранам с BottomNavigationAction из пользовательского интерфейса, и я получаю эту ошибку You should not use <Link> outside a <Router>

Tab.js: 

import React from 'react';
import { Link } from 'react-router-dom';
import { withStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';

// icons
import HomeIcon from '@material-ui/icons/Home';
import DashboardIcon from '@material-ui/icons/Dashboard';
import PaymentIcon from '@material-ui/icons/Payment';
import FaceIcon from '@material-ui/icons/Face';
import AtmIcon from '@material-ui/icons/Atm';

const styles = {
  root: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    cursor: 'pointer'
  },
  wrapper: {
    minWidth: '0px'
  }
};

class Tab extends React.Component {
  state = { value: 0 };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div>
        <BottomNavigation value={value} onChange={this.handleChange} className={classes.root}>
          <Link to="/">
            <BottomNavigationAction label="Home" value="home" icon={<HomeIcon />} className={classes.wrapper}/>
          </Link>
        </BottomNavigation>
      </div>
    );
  }
}

export default withStyles(styles)(Tab);

app.js, где я нахожусьпытаясь отобразить Tab.js, чтобы он оставался на всех страницах!и мои маршруты также отображаются там

App.js 

import React, { Component } from 'react';

import {BrowserRouter} from 'react-router-dom';

import Routers from './Routers';
import Tab from './components/Tab';

class App extends Component {
  render() {
    return (
      <div>
        <Tab />
        <Routers />
      </div>
    );
  }
}

export default App;

rout.js, где я идентифицирую маршруты:

Routes.js 

import React from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import { Provider } from 'react-redux';

import Home from './components/Home';
import Profile from './components/Profile';
import Login from './components/auth/Login';
import reducers from './reducers';

import configureStore from './store/configueStore';
import {getAuthToken} from './actions/auth';

const store = configureStore();

const Routers = () => (
  <Provider store={store}>
    <BrowserRouter>
      <div>
        <Switch>
          <Route path='/' component={Home} exact={true}/>
          <Route path='/login' component={Login} exact={true}/>
          <Route path='/register' component={Login} exact={true}/>
          <Route path='/profile' component={Profile} exact={true}/>
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
);

export default Routers;

how to i use link in my Tab.js file and make the redirection happen and i will love an explanation on why this problem is accruing and how will i be able to fix it with my current file structure. И хорошая ли моя файловая структура?так как у меня есть другой файл для моих маршрутов и рендеринга его в моем app.js

Ответы [ 3 ]

0 голосов
/ 21 ноября 2018

Ваша ссылка и маршруты должны иметь поставщика Router выше в дереве.Также вы должны использовать один BrowserRouter.Вы можете изменить свою конфигурацию на следующую 

const Routers = () => (
      <div>
        <Switch>
          <Route path='/' component={Home} exact={true}/>
          <Route path='/login' component={Login} exact={true}/>
          <Route path='/register' component={Login} exact={true}/>
          <Route path='/profile' component={Profile} exact={true}/>
        </Switch>
      </div>
);


class App extends Component {
  render() {
    return (
      <div>
        <Provider store={store}>
          <BrowserRouter>
              <div>
                 <Tab />
                 <Routers />
              </div>
          </BrowserRouter>
        </Provider>
      </div>
    );
  }
}
0 голосов
/ 21 ноября 2018

Я думаю, вы должны завернуть.Для получения дополнительной информации вы также можете обратиться к Основные понятия для React-Router и React-Router с Material-UI

0 голосов
/ 21 ноября 2018

У вас нет <BrowserRouter> родителя для ссылки, используемой в вашем файле tab.js.Чтобы ваш код работал, внесите следующие изменения в файл App.js: 

import React, { Component } from 'react';

import { BrowserRouter } from 'react-router-dom';

import Routers from './Routers';
import Tab from './components/Tab';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Tab />
          <Routers />
        </div>
      </BrowserRouter />
    );
  }
}

export default App;
...