如何将自定义道具从浏览器路由器传递到组件

Question

我正在尝试将布尔值作为道具传递给导航栏组件，但是在组件内部，它始终显示为未定义。

app.js value内部已正确更新，我不知道尝试通过它作为道具时出了什么问题。

原样的代码应将导航栏的文本从true更改为false，但是什么也没有显示。

为简洁起见，已剪掉很多代码。

app.js

import Navbar from "./components/Navbar";


class App extends React.Component {
  state = {
      value: localStorage.getItem("logStatus") || false,
    };


  setValue = (value) => {
    this.setState({ value });
    localStorage.setItem("logStatus", value);
  };

  render() {
    return (
      <BrowserRouter>
            //this is the where I'm trying to pass props
        <Navbar
          render={(props) => <Navbar {...props} log={this.state.value} />}
        /> 

    <Route
      path="/login"
      render={(props) => (
        <Login {...props} log={this.state.value} setLog={this.setValue} />
      )}
    />
  </BrowserRouter>
);

navbar.js

import React, { useState } from "react";

import { NavLink } from "react-router-dom";

const Navbar = ({ log }) => {
  {
    console.log("log: ", log); //this is always undefined
  }
  return (
    <div>

        <NavLink
          activeClassName="current-tab"
          className="navbar-content"
          to="/login"
        >
          {log}
        </NavLink>
      </div>
  );
};

export default Navbar;

login.js

 const Login = ({ log, setLog }) => {

      <input
        type="submit"
        onClick={() => setLog(!log)} 
        value="login"
      />
    </div>
  );
};

export default Login;