React-router 動態 URL 不包括特定的 URL

Question

我想為 /:user 制作一個動態 url ，它不在某些網址中運行。 由於 /:user 鏈接到基礎，它運行在我所做的每條路線上。 有沒有辦法排除特定的 url 路線？ 我故意不想讓 url 像 /user/:userid 這樣的句柄來解決這個問題。

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from "react-router-dom";
import { createBrowserHistory } from "history";
import { AuthProvider } from '../src/components/provider/AuthProvider.js';
import Register from '../src/views/Register';
import Login from '../src/views/Login';
import Admin from '../src/views/Admin';
import User from '../src/views/User';
import App from './App';
import './assets/scss/style.scss';

const history = createBrowserHistory();

ReactDOM.render(
  <AuthProvider>
    <Router history={history}>
      <App />
      <Route path="/register" component={Register} />
      <Route path="/login" component={Login} />
      <Route path="/admin" component={Admin} />
      <Route path="/:user" component={User} />
    </Router>
  </AuthProvider>,
  document.getElementById('root')
);

const User = ({ match, location }) => {
  let load = true;
  if (location.pathname === '/admin' || location.pathname === '/login' || location.pathname === '/register') {
    load = false;
  }
  return (
    <React.Fragment>
      {load && 
        <h1>this is user {match.params.user}'s page</h1>
      }
    </React.Fragment>
  )
}

export default User;

Answer 1

您可以制作一個Private 路由組件，您可以在其中傳遞一個確保您通過身份驗證的方法。

isAuthenticate 方法

export const isAuthenticated = () => {
if(typeof window === undefined){
    return false;
} 
if(localStorage.getItem("jwt")){
    return JSON.parse(localStorage.getItem("jwt"));
}else{
    return false;
}
}

PrivateRoute.js

const PrivateRoute = ({component:Component, ...rest}) => {
return <Route
    {...rest}
    render={props=>
        isAuthenticated()?(<Component {...props}/>
        ):(
        <Redirect
            to={{
                pathname:"/login",
                state:{ from:props.location }
            }}
        /> 
        )}
/>
}