Question

我正在尝试使用材料ui中的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;

routes.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中

Answer 1

您的tab.js文件中使用的链接没有<BrowserRouter>父级。对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;

Answer 2

您的链接和路由必须在树的上方都具有一个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>
    );
  }
}

Answer 3

我认为你应该包扎。有关详细信息，您还可以参考Key Concepts For React-Router和React-Router With Material-UI

不应在<router>错误之外使用<link />

3 个答案: