react-router 中的嵌套组件未呈现

Question

I am just practicing how react-router works. This is my App.js in which see message route

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import styled, { css } from 'styled-components';
import About from './components/About';
import Home from './components/Home';
import Messages from './components/Messages';


const Ul = styled.ul`
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #282c34;
`;
function App() {
    return (
        <div className='App'>
            <header className='App-header'>
                <img src={logo} className='App-logo' alt='logo' />
                <div>welcome to React</div>
            </header>
            <Ul>
                <Li>
                    <NewLink to='/'>Home</NewLink>
                </Li>
                <Li>
                    <NewLink to='/messages'>Messages</NewLink>
                </Li>
                <Li>
                    <NewLink to='/about'>About</NewLink>
                </Li>
            </Ul>
            <Container>
                <Route exact path='/' component={Home} />
                <Route exact path='/messages' component={Messages} />
                <Route exact path='/about' component={About} />
            </Container>
        </div>
    );
}

export default App;

when route switched to messages route messages get rendered **This is messages Route **

import React from 'react';
import { Route } from 'react-router-dom';
import { Li, NewLink } from '../App';
import Message from './Message';
const Messages = ({ match }) => (
    <div>
        <ul>
            {[...Array(5).keys()].map((n) => (
                <Li key={n}>
                    <NewLink primary to={`${match.url}/${n + 1}`}>
                        Message {n + 1}
                    </NewLink>
                </Li>
            ))}
        </ul>
        <Route path={`${match.url}/:id`} component={Message} />
    </div>
);

export default Messages;

**This is message route but it is not rendering below Messages Route ** **can anyone please tell what is the problem **

import React from 'react';

const Message = ({ match }) => <h3>Message with ID {match.params.id}</h3>;

export default Message;

Answer 1

The issue here is the presence of exact prop on route /messages

Now when you have the exact prop on Route, unless the path matches exactly the Route is not rendered and hence the child Routes will never be evaluated.

A better practise is to use Switch component which renders the first matching Route and re-order the Routes so that prefix paths are the end

<Switch>
    <Route path='/messages' component={Messages} />  // no exact props
    <Route path='/about' component={About} /> 
    <Route path='/' component={Home} /> // home route rendered at the end
</Switch>

Also on a sidenote, in order to define paths on Routes, you must use match.path instead of match.url