反应路由器 Dom NavLink 和链接不起作用

Question

我只是无法让我的 NavLink 或链接在我的项目上工作，路径发生了变化，但没有呈现任何内容。我不知道发生了什么！

这里是主要的 Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from "react-redux"
import App from './App';
import store from "./redux/store"
import './index.css'

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

在 App.js 中，我的主要路由在 HOME 组件和 LOGIN 组件之间旋转，最后我使用了全部。

import './App.css';
import { Switch, Route, withRouter } from "react-router-dom"
import Home from './components/Home'
import Login from './components/Login'
import './App.css';
import Header from './components/Header';

function App() {
  return (
    <div className="overall-container">
      <Header/>
      <Switch>
        <Route exact path='/home' component={Home}/>
        <Route exact path='/Login' component={Login}/>
        <Route component={Login}/>
      </Switch>
    </div>
  );
}

export default withRouter(App);

Home.js 我有我的开关和路线

render() {
    return (
      <div className="homeContainer">
        <h1>TITLE</h1>
        <Switch>
          <Route
            exact path= '/home/admin'
            render={() => (
              <CreateDay
                user={this.props.user}
                users={this.props.users}
              />
            )}
          />
          <Route
            exact path= '/home/profile'
            render={() => (
              <Profile
                user={this.props.user}
                users={this.props.users}
              />
            )}
          />
          <Route
            exact path= '/home/'
            render={() => (
              <Schedule
                user={this.props.user}
                users={this.props.users}
                teeTimes={this.props.teeTimes}
              />
            )}
          />
          </Switch>
      </div>
    )
  }

最后是我的 NavLinks 根本不工作的标题

render() {
    return(
      <div className='headerContainer'>
        <NavLink to="/home">
          <img src={home} alt='logo' className='homeButton'/>
        </NavLink>
        <NavLink to="/home/profile">
          <div className='profileHeaderContainer'>
              {this.props.user.url ?
                <img src={this.props.user.url} alt='logo' className='userImage'/>
                :
                <img src={userImage} alt='logo' className='userImage'/>
              }
            <div>
              <div className='profileHeaderName'>{this.props.user.userName} {this.props.user.lastName}</div>
            </div>
          </div>
        </NavLink>
        <img src={sair} alt='logo' className='sair' onClick={this.onSignOut}/>
      </div>
    )
  }

Answer 1

问题

在根路由上指定 exact 属性必然会阻止它们匹配任何子路由。

<Switch>
  <Route exact path='/home' component={Home}/> // <-- only "/home" exactly
  <Route exact path='/Login' component={Login}/> // <-- only "/Login" exactly
  <Route component={Login}/>
</Switch>

解决方案

移除 exact 属性，以便嵌套开关可以匹配和渲染路由。

<Switch>
  <Route path='/home' component={Home}/>
  <Route path='/Login' component={Login}/>
  <Route component={Login}/>
</Switch>

您同样不需要嵌套路由上的所有 exact 道具。事实上，如果您以递减的特异性正确排序路线，那么您通常不需要或根本不需要使用 exact 属性，以便在不太具体的路径之前列出更具体的路径。