reactjs - How to enter a page other than landing page from outside while using react router dom

Question

I am using routes and links from react router dom in a reactjs web app and when I tried to deploy it to a server as static files, if I open the landing page, it opens, but when I try to enter another page like for example, the reset password page it denies access to the page saying that the page is not available, how can I go over this problem?? here is my code at index.js and you can see that I have added routers to all paths and context to some of them, but HOW CAN I ACCESS CERTAIN PAGES EVEN IF I AM NOT AUTHENTICATED??

import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'antd/dist/antd.css';
import LandingPage from './Layout/LandingPage';
import Dashboard from './Layout/Dashboard';
import Inbox from './Layout/inbox';
import Curriculum from './Layout/Curriculum';
import Classwork from './Layout/ClassWork';
import Homework from './Layout/HomeWork';
import Outbox from './Layout/outbox';
import Class from "./Layout/Class.js";
import Signup from "./Layout/Signup";
import ResetPassword from "./Layout/ResetPassword";
import ResetPasswordConfirmed from "./Layout/ResetPasswordConfirm";
import Profile from "./Layout/Profile";
import Activate from "./Layout/Activate";
import NewMessage from "./Layout/NewMessage.js";
import { UserProvider } from "./Context/UserContext.js";
import { StaffProvider } from "./Context/StaffContext.js";
import { BrowserRouter as Router ,Route, Switch} from "react-router-dom";

import { Provider } from 'react-redux';
import store from './components/store';

import Layout from './hocs/layout';

ReactDOM.render(
    <Provider store= {store}>
      <Router>
        <Layout>
          <Switch>
              <Route component={LandingPage} exact path="/" />
              <Route path="/dashboard" >
                <UserProvider>
                  <Dashboard/>
                </UserProvider>
              </Route>
              <Route path="/Class" >
                <UserProvider>
                  <Class/>
                </UserProvider>
              </Route>
              <Route path="/New-Message" >
                <UserProvider>
                  <NewMessage/>  
                </UserProvider>
              </Route>
              <Route path="/Inbox" >
                <UserProvider>
                  <Inbox/>
                </UserProvider>
              </Route>
              <Route path="/Outbox" >
                <UserProvider>
                  <Outbox/>
                </UserProvider>
              </Route>
              <Route component={ResetPassword} path="/reset-password" />
              <Route component={ResetPasswordConfirmed} path="/password/reset/confirm/:uid/:token" />
              <Route path="/signup" >
                <UserProvider>
                  <StaffProvider>
                    <Signup/>
                  </StaffProvider>
                </UserProvider>
              </Route>
              <Route component={Activate} path="/activate/:uid/:token" />
              <Route component={Curriculum} path="/Curriculum" />
              <Route component={Classwork} path="/Classwork" />
              <Route component={Homework} path="/Homework" />
              <Route path="/Profile" >
                <UserProvider>
                  <Profile/>
                </UserProvider>
              </Route>
          </Switch>
        </Layout>
      </Router>
    </Provider>,
  document.getElementById('root')
);

Answer 1

等待大神答复