reactjs - 如何阻止随机链接使用 react-router 打开？

Question

我是 React 新手，我在一个在线网站上练习修理电器。我使用了react-router并在一个单独的文件中创建了所有路由。

不过我有一个问题，我可以从地址栏中打开任何链接，例如：

http://localhost:3000/<randomword>

我只希望打开我在路由组件中声明的路由，而如果我键入http://localhost:3000/something，我会得到一个包含页眉和页脚的空页面。

这是我的代码：

Index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import Routes from './Routes';
import './index.css';

const App = () => {
    return(
        <BrowserRouter>
            <Routes />
        </BrowserRouter>
        )
    }

ReactDOM.render(<App/>,document.getElementById('root'));

App.js：

import React, {Component} from 'react';
import { Route, BrowserRouter } from 'react-router-dom';
import Layout from './Containers/Layout';
import LandingPage from './Containers/Pages/LandingPage';
import About from './Containers/Pages/About';
import Cities from './Containers/Pages/Cities';
import Discount from './Containers/Pages/Discount';


class Routes extends Component {
    render(){
        return (
            <div>
                <Layout>
                    <BrowserRouter>
                        <Route path="/" render={props => <LandingPage {...props} />} exact component={LandingPage}/>
                        <Route path="/About" component={About}/>
                        <Route path="/Cities" component={Cities}/>
                        <Route path="/Discount" component={Discount}/>
                    </BrowserRouter>
                </Layout>
            </div>
    );
}
};

export default Routes;

Layout.js：

import React, { Component } from 'react';
import Header from "./Layouts/Header";
import Footer from './Layouts/Footer';
import './Layout.css';

export default class Layout extends Component {
    constructor(){
        super();
        this.state= {
           
        }
    }
    render() {
        return (
            <div className="page-container">
                <Header/>
                    <div className="content-wrap">
                        {this.props.children}
                    </div>
                <Footer/>
            </div>);
        }
}

有人可以帮我弄清楚我应该如何阻止从地址栏打开随机随机页面吗？

标签： reactjsreact-router-dom

Answer 1

import {  Redirect } from "react-router-dom"
<Route path="/not-found" component={notFound-Component} />
<Redirect to="/not-found" />

如果路由不存在，这将始终将您重定向到 404 组件只需创建一个 404 组件，并且您应该在定义所有路由后在末尾添加重定向