javascript - react 路由器嵌套路由不起作用

我的任务是在Main products上打开/并在Misc products上以相同的布局（页眉和页脚）打开/misc，并在About上以无布局打开/about

import React from 'react';
import {render} from 'react-dom';

import {BrowserRouter as Router, Route, Switch, Link, Redirect} from 'react-router-dom'

const About = () => "About";
const Error = () => "404";

class AdvertsList extends React.Component {
    render() {
        let {match} = this.props;

        return (
            <div className="container">
                <header>Header</header>
                <main>
                    <nav>
                        <Link to="/">Main products</Link> #
                        <Link to="/misc">Misc products</Link> #
                        <Link to="/about">About</Link>
                    </nav>
                    <div className="content">
                        <Switch>
                            <Route path="/" exact={true} render={() => "Main products"}/>
                            <Route path="/misc" render={() => "Misc products"}/>
                            <Redirect to="/" />
                        </Switch>
                    </div>
                </main>
                <footer>Footer</footer>
            </div>
        )
    };
}

class App extends React.Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/" exact={true} component={AdvertsList}/>
                    <Route path="/about" component={About}/>
                    <Route path="*" component={Error}/>
                </Switch>
            </Router>
        );
    }
}

render(<App/>, document.querySelector("#app"));

而且，如果在Main products上打开/并且/about链接也可以正常工作，则尽管所有/misc设置，exact链接也无法正常工作，但返回了404，我无法访问其他产品。

最佳答案

您的第一个路由仅由于其确切属性而解析为根，而不会解析任何其他路由。因此/misc自动跳到您的错误路线。

您可以将misc路由添加为App组件上的另一个Route组件。
或通过

<Route path="/(|misc)" exact={true} component={AdvertsList} />

这会将/和/misc都解析为AdvertsList，其确切属性仍解析为true。您可以通过添加其他管道（例如|misc|settings|varia）来添加其他路线

关于javascript - react 路由器嵌套路由不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51912203/