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

Question

我只是在练习 react-router 的工作原理 这是我的App.js，其中看到消息路由

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;

当路由切换到消息时路由消息被呈现 **这是消息路由**

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;

**这是消息路由，但未在消息路由下方呈现 ** **谁能告诉我问题是什么**

import React from 'react';

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

export default Message;

Answer 1

这里的问题是路线 /messages

上存在 exact prop

现在，当您在 Route 上拥有 exact 属性时，除非路径完全匹配，否则不会呈现 Route，因此永远不会评估子 Routes。

更好的做法是使用 Switch 组件呈现第一个匹配的路由并重新排序路由，以便前缀路径是结尾

<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>

另外在旁注中，为了在路由上定义路径，您必须使用 match.path 而不是 match.url

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

Nested component in react-router is not rendering

javascript

reactjs

react-router

react-router-v4

react-router-dom