Question

我只是在练习反应路由器的工作方式。 这是我的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

这里的问题是exact prop路线上有/messages

现在，当您在Route上拥有确切的道具时，除非该路径与该Route完全匹配，否则不会呈现该Route，因此将永远不会评估子Routes。

一种更好的做法是使用Switch组件，该组件呈现第一个匹配的Route并重新排列Route的顺序，以便前缀路径为末尾

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

此外，要在Routes上定义路径，还必须使用match.path而不是match.url

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

1 个答案: