Question

具有根路由的应用程序组件：

import React, { Component } from 'react';
import './App.css';
import Routes from './routes';

class App extends Component {

    render() {
        return (
            <Routes/>
        );
    }
}

export default App;

根本路线：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Login from './scenes/Login/Login';
import Dashboard from './scenes/Dashboard/Dashboard';

const Routes = () => (
    <Router>
        <Switch>
        <Route exact path="/" component={Login} />
            <Route path="/dashboard" component={Dashboard} />
        </Switch>
    </Router>
);

export default Routes;

带有嵌套路由的嵌套组件：

import React, { Component } from 'react';
import logo from '../../logo.png';
import './Dashboard.css';
import Routes from './routes';
import { Link, withRouter } from 'react-router-dom';

class Dashboard extends Component {

    render() {        

        return (
            <div className="App">
                <div id="map" />
                <div className='sidebar'>
                    <img src={logo} className="App-logo" alt="logo" />
                    <Link to={{ pathname: `/dashboard/profile` }}>
                        <i class="icon blue fa fa-2x fa-user mr-3 float-right"></i>
                    </Link>
                    <Link to={{ pathname: `/dashboard/notifications` }}>
                        <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i>
                    </Link>
                    <Link to={{ pathname: `/dashboard/home` }}>
                        <i class="icon blue fa fa-2x fa-home mr-3 float-right"></i>
                    </Link>
                    <Routes />


                </div>
            </div>
        );
    }
}

export default Dashboard;

嵌套路线：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Notifications from './scenes/Notifications/Notifications';
import Home from './scenes/Home/Home';
import Profile from './scenes/Profile/Profile';

const Routes = () => (
    <Router>
        <Switch>
            <Route path="/dashboard/home" component={Home} />
            <Route path="/dashboard/profile" component={Profile} />
            <Route path="/dashboard/notifications" component={Notifications} />
        </Switch>
    </Router>
);

export default Routes;

所以问题是，当我单击链接ex。（/dashboard/notifications）时，它会更改浏览器中的url，但不会更新布局，但是当我刷新页面时，它可以正常工作并且适当的组件是可见。 /路线和dashboard工作正常。

Answer 1

我可能会迟到一些，但是将位置传递给交换机解决了我的问题。

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation
} from "react-router-dom";

let location = useLocation();

和渲染内：

<Router>
  <Switch location={location}>
    <Route path="/dashboard/home" component={Home} />
    <Route path="/dashboard/profile" component={Profile} />
  </Switch>
</Router>

Answer 2

尝试使用NavLink标签代替Link和BrowserRouter代替Router，从“ react-router-dom”导入它

Answer 3

使用这种链接语法方法

 <Link to='/dashboard/notifications'>
                    <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i>
                </Link>

代替此

 <Link to={{ pathname: `/dashboard/notifications` }}>
                        <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i>
                    </Link>

如果它不起作用，则可能与您的浏览器缓存或其他一些问题有关

嵌套的React Router不会更新布局

3 个答案: