如何在反应路由器 dom 中使用嵌套路由

Question

I am trying to use nested routes with react router but its not working for me. I also tried to add nested router on main App but it's not working.

App.js

import Message from './containers/Message'
import {connect} from 'react-redux'
import {addMessage, setMessages} from './store/actions/message'

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

class App extends Component {

    constructor(props) {
        super(props)
        WebSocketInstance.addCallbacks(
            this.props.setMessagesMethod.bind(this),
            this.props.addMessageMethod.bind(this)
        )
    }

    render() {
        return (
            <Router>
                <Route exact path='/login/' component={WrappedLoginForm} />
                <Route exact path='/' component={ChatApp} />
                {/* <Route path='/:chatID' component={Message} /> */}
            </Router>
        )
    }
}

ChatApp.js

export class ChatApp extends Component {

  componentWillMount() {
    if (!this.props.loading){
      this.props.autoLogin(this.props.history)
    }
  }

  render() {
    return (
      this.props.isAuthenticated ?
      (<div id='frame' >
        <Sidepanel />
        <div className="content">
          <div className="contact-profile">
            <img src="https://www.netfort.com/assets/user.png" alt="" />
            <p>{this.props.user.username}</p>
          </div>

          <Route path='/chat/:chatID' component={Message} />

        </div>
      </div>): null
    )
  }
}

i am trying to match http://localhost:3000/chat/1 but Message component is not rendering.

Answer 1

如果您使用exact path则不会命中任何子路由，因为子路由将与命中父路由的条件不匹配。