侧边栏切换 URL 的反应路由但不改变实际视图

Question

这是我的app.js 文件。在这里一切似乎都很好，我认为这里不需要更改任何内容，因为当我只需输入 url 时，路线就可以完美运行。

import React, { Component }from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter, Switch } from "react-router-dom";

// Layouts
import Header from '../components/layouts/Header';
import Sidebar from '../components/layouts/Sidebar';

// Views
import Repos from '../components/views/Repos';
import Events from '../components/views/Events';
import Hooks from '../components/views/Hooks';
import Issues from '../components/views/Issues';
import Members from '../components/views/Members';
import PublicMembers from '../components/views/PublicMembers';

class App extends Component {
    render() {
    return (
      <BrowserRouter>
        <div>
          <Header />
          <Sidebar /> 
          <Switch>
            <Route exact path='/' component={Repos}/>
            <Route exact path='/repos' component={Repos}/>
            <Route path='/events' component={Events}/>
            <Route path='/hooks' component={Hooks}/>
            <Route exact path='/issues' component={Issues}/>
            <Route path='/members' component={Members}/>
            <Route path='/public_members' component={PublicMembers}/>
          </Switch>
        </div>
      </BrowserRouter>
        );
    }
}

export default App;

if (document.getElementById('root')) {
    ReactDOM.render(<App />, document.getElementById('root'));
}

这是我的侧边栏。在此我得到我的 url 更改，但我没有看到新视图。是否有可能我需要将更多内容传递给这个视图？还是我没有写出正确的电话？

import React, {Component} from 'react'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class Sidebar extends Component {

  render() {
    return (
      <Router>
      <List disablePadding dense style={styleSidebar}>
        <ListItem button>
          <ListItemText style={textStyle}><Link to="/repos">Repos</Link></ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}><Link to="/events">Events</Link></ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}><Link to="/hooks">Hooks</Link></ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}><Link to="/issues">Issues</Link></ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}><Link to="/members">Members</Link></ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}><Link to="/public_members">Public Members</Link></ListItemText>
        </ListItem>
      </List>
      </Router>
    )
  }
}  

export default Sidebar

Answer 1

问题

您的SideBar 正在另一个Router 中呈现。 Link 组件使用来自最近的Router 的路由器上下文。或者换句话说，App 中使用的 Router 上下文没有被更新，因为嵌套路由器处理了它。

解决方案

删除包裹边栏的Router。

class Sidebar extends Component {
  render() {
    return (
      <List disablePadding dense style={styleSidebar}>
        <ListItem button>
          <ListItemText style={textStyle}>
            <Link to="/repos">Repos</Link>
          </ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>
            <Link to="/events">Events</Link>
          </ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>
            <Link to="/hooks">Hooks</Link>
          </ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>
            <Link to="/issues">Issues</Link>
          </ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>
            <Link to="/members">Members</Link>
          </ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>
            <Link to="/public_members">Public Members</Link>
          </ListItemText>
        </ListItem>
      </List>
    );
  }
}